如何在屏幕转换动画过程中防止用户交互

Question

使用带有fade转换的StackNavigator在屏幕之间导航时，用户可以在转换动画期间单击，并可能在要导航的屏幕上点击TouchableOpacity。TouchableOpacity注册命中，因此应用程序相应地做出响应。这导致了"；快速点击"；用户点击一个按钮导航到一个新屏幕，然后立即点击他们认为会有新按钮的地方，但实际上是点击上一个屏幕上的按钮。

在这些过渡动画中，有没有办法防止任何用户交互？我已经尝试将转换持续时间设置为0，如下所示：

transitionConfig: () => ({
transitionSpec: {
duration: 0
}
})

但问题仍然存在。

我不想完全禁用动画，因为它对大多数用户来说足够快，而且他们喜欢动画。

Answer 1

因此，在您的情况下，您可以做以下几件事

• 您可以使用React Native Activity Indicator->查看
• 您可以使用叠加库->react本地加载微调器覆盖->查看GitHub
• 如果你喜欢像facebook/instagram一样加载->则使用react原生轻松内容加载器->查看GitHub

Answer 2

您需要在离开之前标记屏幕；禁用所有触摸。

一个简单的方法是有一个可重用的钩子，它返回一个透明的、绝对定位的视图，覆盖整个页面，并有一个回调来启用它；

所以你会流动；启用这将重叠整个屏幕并捕获任何点击，基本上禁用它们；

更像：

function useOverlay(){
const [isVisible, toggle] = React.useState(false);
const Component = React.memo(()=><View style={styles.transparentAbsolute} />,[])

return [toggle, isVisible ? Component : null];
}

然后在您的屏幕内，在您呼叫navigate之前，只需呼叫切换

并在屏幕顶部包含组件；

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
const [ toggle, component ]  = useOverlay();
return (
<View style={styles.container}>
{component}
<Button onPress={()=>{toggle(true); navigation.navigate('Home');} title="go home" />
</View>
);
}