关闭模式或操作表后,React Native 应用程序神秘地冻结

Luk*_*ams 7 react-native expo react-native-modal

我遇到了一个问题,每次我在 React Native 应用程序中关闭模式、操作表或警报时,该应用程序都会完全冻结并且无法与之交互。

导航到新堆栈或单击按钮不会重现。

我必须杀死应用程序并重新启动才能再次交互。通过打包程序重新加载应用程序无济于事。

我们有代码,当一个人被解雇时会自动显示一个新的模态并且实际上有效 - 模态是可交互的。所以似乎只有底层内容被冻结,好像顶部仍然有一个模态但它是不可见的。

疯狂的是,这是在以前已知的好分支中复制的。因此,本地配置/缓存肯定发生了一些变化,但我不知道是什么。我重新克隆了 repo,清除了 watchman/packager/yarn 缓存,擦除了所有数据的模拟器。没有什么可以解决问题。

打包器、xcode 或 Flipper 中也没有日志指示可能出现什么问题。

使用react-native-modal,@expo/react-native-action-sheet和 内置的 React Native Alert(虽然不使用通用的 Expo 框架)。我已将这些库升级到最新版本。

没有想法了。我还能在哪里看?


更新:超最小代码重现。此模态自动显示、自动关闭,然后按钮不可按下。从代码中删除模态使按钮可按下。

function TestApp() {
  const [isVisible, setVisible] = useState(true);
  return (
    <>
      <TouchableOpacity style={{ padding: 80 }} delayPressIn={0}>
        <Text>Touch</Text>
      </TouchableOpacity>
      <Modal isVisible={isVisible} onShow={() => setVisible(false)}>
        <Text>Foo</Text>
      </Modal>
    </>
  );
}
Run Code Online (Sandbox Code Playgroud)

如果我添加最小警报调用而不是模态,也会发生同样的情况。在这种情况下,我会在 5 秒后显示另一个可交互的警报。 只有弹出框是可交互的——例如警报和模式。

  useEffect(() => Alert.alert("alert"), []);
  useEffect(() => {
    setTimeout(() => Alert.alert("5s alert"), 5000);
  }, []);
Run Code Online (Sandbox Code Playgroud)

更新 #2

看起来每个新的“popover”样式 UI 都使以前的 UI 无法交互。

如果我Alert像上面那样忽略第一个,那么我无法与底层交互TouchableOpacity,但我可以与第二个 (5-second) 交互Alert

但是,如果我不解除第一个警报并且第二个警报弹出,我只能解除第二个警报并且不能与保持冻结的第一个警报交互。

小智 10

对我来说,只有在我的应用程序的 Flipper 布局插件处于活动状态时才会发生冻结。禁用布局插件,重新启动 Flipper,重新启动我的应用程序,冻结问题消失了。