react-native：防止用户触摸任何组件？

Question

react-native：在当前屏幕的顶层添加封面视图以防止用户触摸任何组件。

当用户触摸到一个组件时，我需要判断用户是否登录。如果用户没有登录，我需要提醒'请先注册'，然后导航到Register屏幕。我的问题是如何防止用户触摸任何组件。由于用户可以再次触摸相同的组件，那么模拟器将不止一次地浏览屏幕。 我正在使用react-native-easy-toast来显示提示窗口。 如何在当前屏幕的顶部添加封面视图？我添加一个视图并设置样式index'999'，但它不起作用。

const styles = StyleSheet.create({ 
    container: { 
     backgroundColor: '#EBF0F2', 
    }, 
    coverV: { 
     backgroundColor:'red', 
     width:width, 
     height:height, 
     zIndex:9999, 
    }, 
    title: { 
     position: 'absolute', 
     top: 20, 
     flex: 1, 
     height: 42, 
     width: width, 
     opacity: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor:'transparent' 
    }, 
    icons: { 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     backgroundColor: 'white', 
    } 
}); 





    return(
     <ScrollView style={styles.container}> 
      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="light-content" translucent={true}/> 
      <Banner resources={tempArray} itemTouchFun={this.bannerNavigateFunc}/> 
      <View style={styles.title}> 
       <Image source={require('../../img/tfind.png')}/> 
      </View> 

      <View style={styles.icons}> 
       <Icon source={require('../../img/doctspec.png')} 
        onPress={this.onDoctor.bind(this)} 
       title='Icon1' /> 
       <Icon source={require('../../img/osmedical.png')} 
       onPress={this.onOSMed} 
       title='Icon2' /> 
       <Icon source={require('../../img/newdrugs.png')} 
       onPress={this.onMedicineBook} 
       title='Icon3' /> 
       <Icon source={require('../../img/reservation.png')} 
       onPress={this.onOSMed} 
       title='Icon4' /> 
      </View> 

      {this.renderNewsTabs()} 
      {this.renderNews()} 
      <View style={styles.coverV} /> 
      <Toast ref="toast" position='center' positionValue={200} 
        fadeInDuration={750} fadeOutDuration={1000} opacity={0.8} /> 
     </ScrollView> 
    );} 

Answer 1

根据我的理解，您希望防止用户在用户登录之前使用任何功能。因此，如果用户点击屏幕上的任何位置，将出现警告，通知用户注册或登录。所以我得出的结论是：

使用TouchableWithoutFeedback封装整个视图，因此无论何时onPress事件在视图中触发，都会出现警告，代码如下所示。

const styles = StyleSheet.create({ 
    container: { 
     backgroundColor: '#EBF0F2', 
    }, 
    coverV: { 
     backgroundColor:'red', 
     width:width, 
     height:height, 
     zIndex:9999, 
    }, 
    title: { 
     position: 'absolute', 
     top: 20, 
     flex: 1, 
     height: 42, 
     width: width, 
     opacity: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor:'transparent' 
    }, 
    icons: { 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     backgroundColor: 'white', 
    } 
}); 


export default class TouchView extends Component { 

    contructor(props) 
    { 
    super(props) 
    this.state = { 
    disable: true //prevents from pressing on buttons 
    showAlert: false 
    } 
    } 

    componentDidMount() 
    { 
    if(user is logged in) 
    { 
     this.setState({ disable: false }) 
    } 
    } 

    touchAnywhere() 
    { 
    this.setState({ showAlert: !this.state.showAlert })//showAlert 
    //navigate to login or register 
    } 
    render() 
    { 
    return(
     <TouchableWithoutFeedback onPress = {() => this.touchAnywhere()} 
     <ScrollView style={styles.container}> 
      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="light-content" translucent={true}/> 
      <Banner resources={tempArray} itemTouchFun={this.bannerNavigateFunc}/> 
      <View style={styles.title}> 
       <Image source={require('../../img/tfind.png')}/> 
      </View> 

      <View style={styles.icons}> 
       <Icon disable source={require('../../img/doctspec.png')} 
        onPress={this.onDoctor.bind(this)} 
       title='Icon1' /> 
       <Icon disable source={require('../../img/osmedical.png')} 
       onPress={this.onOSMed} 
       title='Icon2' /> 
       <Icon disable source={require('../../img/newdrugs.png')} 
       onPress={this.onMedicineBook} 
       title='Icon3' /> 
       <Icon disable source={require('../../img/reservation.png')} 
       onPress={this.onOSMed} 
       title='Icon4' /> 
      </View> 

      {this.renderNewsTabs()} 
      {this.renderNews()} 
      <View style={styles.coverV} /> 
      {this.state.showAlert? 
      <Toast ref="toast" position='center' positionValue={200} 
        fadeInDuration={750} fadeOutDuration={1000} opacity={0.8} /> 
      : null} 
     </ScrollView> 
     </TouchableWithoutFeedback> 
    );} 
} 

干杯:)