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> 
    );} 
} 

乾杯:)