react-native：ユーザーがコンポーネントに触れるのを防ぐ？

Question

react-native：ユーザーがコンポーネントに触れるのを防ぐために、現在の画面の最上位レイヤーにカバービューを追加します。

ユーザーが1つのコンポーネントに触れると、ユーザーのログインを判断する必要があります。ユーザーがログインしていない場合は、「まず登録してください」と警告し、Register画面に移動する必要があります。私の問題は、ユーザーが任意のコンポーネントに触れるのを防ぐ方法です。ユーザーが同じコンポーネントに再び触れることができる場合、シミュレータは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> 
    );} 
} 

乾杯:)