Question

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

当用户触摸一个组件时，我需要判断用户是否登录。如果用户没有登录。我需要提醒“请先注册”，然后导航到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>
    );} 
}

干杯：）

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

1 个答案: