我遇到了一个问题,每次我在我们的 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>
</>
);
}
如果我添加一个最小的警报调用而不是模式,也会发生同样的情况。在这种情况下,我会在 5 秒后显示另一个可交互的警报。 只有弹出框是可交互的——例如警报和模式。
useEffect(() => Alert.alert("alert"), []);
useEffect(() => {
setTimeout(() => Alert.alert("5s alert"), 5000);
}, []);
更新#2
看起来每个新的“popover”样式 UI 都会使以前的 UI 无法交互。
如果我按上述方式取消第一个Alert
,则我无法与底层交互TouchableOpacity
,但我可以与第二个 (5-second) 交互Alert
。
但是,如果我不关闭第一个警报并且第二个警报弹出,我只能关闭第二个警报而不与保持冻结的第一个警报交互。