Wie schließe ich ein in einer anderen benutzerdefinierten Komponente verschachteltes Modal? Mein Modal befindet sich in einer anderen Komponente. Ich habe ein Problem bei der Übergabe des Status an die übergeordnete Komponente. Unten sehen Sie die übergeordneten und untergeordneten Komponenten.
Übergeordnete Komponente:
const ViewNote = ({route, navigation}) => { const [visible, setVisible] = useState(false); function visibility(cases) { setVisible(cases); console.log(cases); } return ( <View style={styles.noteContainer}> {/* 模态框 */} <FancyAlert visible={visible} /> <View style={styles.deleteContainer}> <Pressable android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(true)}> <MaterialIcons style={styles.icon} name='delete' size={40}/> </Pressable> </View> </View> ) } export default ViewNote
Unterkomponente:
const FancyAlert = ({visible}) => { const [showAlert, setShowAlert] = useState(false); return ( <Modal transparent visible={visible}> <View style={styles.modalContainer}> <View style={styles.dialogContainer}> <Text style={[styles.text, {fontSize: 16}]}>您确定要删除此便签吗?</Text> <View style={styles.buttonContainer}> <Pressable style={styles.cancel} android_ripple={{color: '#d9d9d9'}} onPress={() => setVisible(false)}> <Text style={[styles.text, {fontFamily: 'SofiaProBold'}]}>取消</Text> </Pressable> </View> </View> </View> </Modal> ) } export default FancyAlert
将状态移动到父组件,并传递onClose函数。
你只需将“visibility”函数作为FancyAlert的属性传递即可。 你的代码应该像这样:
然后,FancyAlert组件应该是:
这样就可以了