在不重新渲染代码的情况下更新 React-Native 模态的可见性

Question

我在使用此模态时遇到问题，我需要它在按下按钮时可见而不重新呈现代码，但我不知道该怎么做，这是我的模态代码：

    import React from 'react';
    import { StyleSheet, Text, View, TouchableOpacity, FlatList, Modal} from 'react-native';    

    const Modalt = props => {  
        return(
            <Modal visible={props.vivible} transparent={true}>
                    <View style={{width:'100%', height:'100%', justifyContent:'center', alignItems:'center',backgroundColor: 'rgba(52, 52, 52, 0.2)'}}>
                        <View style={{width:'85%', height:'30%', backgroundColor:'white', borderRadius:8, alignItems:'center', justifyContent:'space-evenly', padding:12}}>
                            <View>
                                <Text style={{fontFamily:'Montserrat-SemiBold', fontSize:18}}>Deseja cancelar:</Text>
                            </View>
                            <View>
                                <Text style={{fontFamily:'Montserrat-Medium', textAlign:'center'}}>
                                        Deseja cancelar o agendamento da consulta no  
                                        <Text style={{fontFamily:'Montserrat-SemiBold'}}> dia xx xx xxxxx </Text>  
                                        às <Text style={{fontFamily:'Montserrat-SemiBold'}}>xx:xx </Text> 
                                        com o<Text style={{fontFamily:'Montserrat-SemiBold'}}> paciente Xxxxxxx</Text>
                                </Text>
                            </View>
                            <View style={{flexDirection:'row', justifyContent:'space-evenly', width:'100%'}}>
                                    <TouchableOpacity style={{borderRadius:4, borderWidth:1, borderColor:'red', padding:0, justifyContent:'center', alignItems:'center', paddingHorizontal:18, paddingVertical:4}} onPress={props.onDelete}>
                                        <Text style={{fontFamily:'Montserrat-SemiBoldItalic', color:'red', fontSize:18}}>Não</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{borderRadius:4, borderWidth:1, borderColor:'green', padding:0, justifyContent:'center', alignItems:'center', paddingHorizontal:18, paddingVertical:4}} onPress={props.onConfirm}>
                                        <Text style={{fontFamily:'Montserrat-SemiBoldItalic', color:'green', fontSize:18}}>Sim</Text>
                                    </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>
        );
    } 

    export default Modalt;

下面是应该使其可见的代码段

    const modalVisibility = useRef(false);
        const deleteItensHandler = () =>
        {
            console.log('teste');
            modalVisibility.current = true;
        }
        const deleteItensHandlerCancel = () =>
        {
            console.log('teste_dois');
            modalVisibility.current = false;
        }

还有这个：

<Modalt vivible={modalVisibility.current} onDelete={deleteItensHandlerCancel}/>

Answer 1

基本上你想要的是不可能的。您想在不重新渲染的情况下更改渲染...我假设无论您出于何种原因想要这种行为，您都可以简单地使用另一种逻辑来实现您想要的结果。

在不重新渲染代码的情况下更新 React-Native 模态的可见性

Update the visibility of an React-Native modal without re-rendering the code

javascript

reactjs

react-native

expo

react-props