React native 反应本机： ；防止用户接触任何组件？；

react native：在当前屏幕的顶层添加一个覆盖视图，以防止用户触摸任何组件

当用户触摸一个组件时，我需要判断用户是否登录。如果用户没有登录。我需要提醒“请先注册”，然后导航到

register

屏幕。我的问题是如何防止用户触摸任何组件。由于用户可以再次触摸相同的组件，因此模拟器将在<代码>寄存器屏幕上导航不止一次。 我正在使用

react native easy toast

显示提示窗口。 如何在当前屏幕顶部添加封面视图？我添加了一个视图并将样式

索引设置为“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>
    );}

const styles=StyleSheet.create({
容器：{
背景颜色：“#EBF0F2”，
},
封面五：{
背景颜色：'红色'，
宽度：宽度，
高度:高度,，
zIndex:9999，
},
标题：{
位置：'绝对'，
前20名，
弹性：1，
身高：42，
宽度：宽度，
不透明度：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：'透明'
},
图标：{
flexDirection:'行'，
flexWrap:“wrap”，
背景颜色：“白色”，
}
});
返回(
{this.renderNewsTabs（）}
{this.renderNews（）}
);}
根据我的理解，您希望在用户登录之前阻止用户使用任何功能。因此，如果用户单击屏幕中的任何位置，就会出现一个警报，通知用户注册或登录。所以我得出的结论是：

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

const styles=StyleSheet.create({
容器：{
背景颜色：“#EBF0F2”，
},
封面五：{
背景颜色：'红色'，
宽度：宽度，
高度:高度,，
zIndex:9999，
},
标题：{
位置：'绝对'，
前20名，
弹性：1，
身高：42，
宽度：宽度，
不透明度：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：'透明'
},
图标：{
flexDirection:'行'，
flexWrap:“wrap”，
背景颜色：“白色”，
}
});
导出默认类TouchView扩展组件{
建筑商（道具）
{
超级（道具）
此.state={
disable:true//防止按下按钮
showAlert:错误
}
}
componentDidMount（）
{
如果（用户已登录）
{
this.setState（{disable:false}）
}
} 
touchAnywhere（）
{
this.setState（{showAlert:！this.state.showAlert}）//showAlert
//导航到登录或注册
} 
render（）
{
返回(
this.touchAnywhere（）}
{this.renderNewsTabs（）}
{this.renderNews（）}
{this.state.showart？
：null}
);} 
}

干杯：）