反应原生：模态不显示答案

【问题标题】：react native: modal is not displaying反应原生：模态不显示
【发布时间】：2020-03-07 06:49:32
【问题描述】：

我是 react-native 的新手，我正在尝试使用以下代码在 react-native 中显示模态

      <View>
    <View onPress={() => {this.toggleModal(true) }}  onBackdropPress={ () => 
   {this.hideModal(false)}}>

        <View>
            <OcticonsIcons name='plus' size={19}/>

            <Text>QUICK ACTION</Text>
        </View>

        <View>
            <View>
                <Image source={require('../images/truck.png')} 
                />
                <Image source={require('../images/taxi(1).png')} 
                />
                <Image source={require('../images/tour.png')} 
                />
            </View>
        </View>

     </View>

    </View>
    <Modal visible={this.state.isModalVisible} animationType = "slide" transparent = 
    {false}>
            <View style={{ flex: 1 }}>
             <Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15 
      }} > Services </Text>
            </View>
      </Modal>


  toggleModal(visible){
   this.setState({ isModalVisible: visible });
  }

    hideModal(visible){
   this.setState({ isModalVisible: visible })
   }

但它不起作用，谁能告诉我我的代码有什么问题，谢谢。

【问题讨论】：

标签： react-native react-native-modal

【解决方案1】：

问题是您不能在组件上使用 onPress 功能，它仅用于显示。要使用 onPress，您必须使用 TouchableOpacity。

检查下面的代码：

 <View>
    <TouchableOpacity onPress={() => {this.toggleModal(true) }}  onBackdropPress={ () => 
   {this.hideModal(false)}}>

        <View>
            <OcticonsIcons name='plus' size={19}/>

            <Text>QUICK ACTION</Text>
        </View>

        <View>
            <View>
                <Image source={require('../images/truck.png')} 
                />
                <Image source={require('../images/taxi(1).png')} 
                />
                <Image source={require('../images/tour.png')} 
                />
            </View>
        </View>

     </TouchableOpacity>

    </View>
    <Modal visible={this.state.isModalVisible} animationType = "slide" transparent = 
    {false}>
            <View style={{ flex: 1 }}>
             <Text style={{ fontWeight:'bold', fontSize: 20, color: '#f79334', marginTop: 15 
      }} > Services </Text>
            </View>
      </Modal>


  toggleModal = (visible) =>{
   this.setState({ isModalVisible: visible });
  }

    hideModal = (visible) => {
   this.setState({ isModalVisible: visible })
   }

希望对您有所帮助。如有疑问，请随意

【讨论】：

这里我的模态被打开了，我可以通过点击关闭按钮来关闭模态。但我的问题是如果我打开一次然后什么也没做。手机进入睡眠模式。有时我会打开应用程序。它无法显示模态，如果我单击文本燕鸥并为其提供服务，它没有响应。任何建议