本机反应:模态未显示
react native: modal is not displaying
我是 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 })
}
但是它不起作用,谁能告诉我我的代码有什么问题,谢谢。
问题是您不能在组件上使用 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 })
}
希望对您有所帮助。有问必答
我是 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 })
}
但是它不起作用,谁能告诉我我的代码有什么问题,谢谢。
问题是您不能在组件上使用 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 })
}
希望对您有所帮助。有问必答