react native: modal is not displaying

Question

我是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 })
}

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

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

希望能有所帮助。无需怀疑