我已经为模态编写了上述可重用组件,但是当我在模态之外单击时,我想关闭模态,为此我使用了 TouchableWithoutFeedback 但 onPress 我添加了道具,我不想使用我想要的道具在此代码本身中添加逻辑,以便我不必在我将使用此组件的任何地方调用该道具。请让我知道如何实现这一目标
<Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
<TouchableWithoutFeedback onPress={props.dismissModal}>
<View style={Styles.opacityContainer}></View>
</TouchableWithoutFeedback>
<View style={Styles.container}>
<View style={Styles.headerContainer}>
<View style={[Styles.header, Styles.directionRow]}>
<View>
<Text style={Styles.headerText}>{bottomSheetStrings.addNew}</Text>
</View>
<View style={SheetStyles.iconContainer}>
<IMIcon
name={Icon.cancel}
size={18}
color={colors.grayish}
iconsStyle={Styles.closeButton}
/>
</View>
</View>
</View>
<View style={Styles.viewContainer}>
<SafeAreaView>
<FlatList
horizontal={false}
data={props.navData}
renderItem={renderActions}
keyExtractor={(item) => item.id}
numColumns={4}
/>
</SafeAreaView>
</View>
</View>
</Modal>
答案 0 :(得分:0)
只需将 Modal
的内容包装在 TouchableWithoutFeedback
中,然后从那里设置可见性状态。
以下是完整示例:Expo Snack
import React, { useState } from 'react';
import {
Alert,
Modal,
StyleSheet,
Text,
Pressable,
View,
TouchableWithoutFeedback,
} from 'react-native';
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
this.setModalVisible(false);
}}>
<TouchableWithoutFeedback onPressOut={() => setModalVisible(false)}>
<View style={styles.centeredView}>
<TouchableWithoutFeedback>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(false)}>
<Text style={styles.textStyle}>Hide Modal</Text>
</Pressable>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => setModalVisible(true)}>
<Text style={styles.textStyle}>Show Modal</Text>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 22,
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 100,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#2196F3',
},
textStyle: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText: {
marginBottom: 15,
textAlign: 'center',
},
});
export default App;
答案 1 :(得分:0)
尝试使用 https://github.com/react-native-modal/react-native-modal npm,它比 react native inbuild modal 提供更多的可访问性。
我们可以简单地处理 onBackdropPress 事件来关闭模态。
例如:
<Modal isVisible={isVisible} onBackdropPress={() => setVisible(false)} >
<View style={{ height: 100, alignItems: "center", justifyContent: "center" }}>
<Text>I am the modal content!</Text>
</View>
</Modal>