如何在 React Native 中显示活动指示器时锁定所有屏幕的触摸?

Question

我一直在用 React Native 开发一个应用程序，我正在完善它。我的一个错误是，当我显示活动指示器时，我可以触摸此活动指示器组件下方的视图组件。 我尝试将其置于模态视图中。它有效，但似乎很脏。 您对如何锁定触摸还有其他想法吗？

Answer 1

您需要为此制作一个覆盖层，并在此处添加pointerEvents="none"。

风格

spinner: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
justifyContent: 'center',
backgroundColor: '#f3f3f3'
}

用法

{loading && <View style={styles.spinner} pointerEvents={'none'}>
<ActivityIndicator/>
</View>
}

其中loading是您的条件检查。

Answer 2

为了阻止对整个视图的触摸，我正在使用 https://facebook.github.io/react-native/docs/view.html#pointerevents 但是，您可能需要探索更多导航栏操作，例如后退和硬件后退操作。

Answer 3

为了阻止对整个视图的触摸，我正在使用链接 但是，您可能需要探索更多导航栏操作，例如后退和硬件后退操作。

上面的这个链接不再有效。 在这里，我们有一个新的组件，您可以使用

import React from "react";
import { View,ActivityIndicator } from "react-native";
import { scale } from "react-native-size-matters";
const BlockLoading = () => {
return(
<View 
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems:"center",
flex:1,
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,.02)'
}} 
pointerEvents={'none'}>
<View style={{backgroundColor:"rgba(0,0,0,.5)",borderRadius:scale(5), padding:scale(20)}}>
<ActivityIndicator color={"#fff"} size={"large"} />
</View>
</View>
)
}
export default BlockLoading