React Native：后退按钮关闭模态

Question

我正在尝试让文本在用户按下时打开模式，并在用户按下后退按钮时关闭。当用户单击文本时，模式不会打开。我尝试按照其他问题的解决方案进行操作，但它不起作用，并且它们的模态不在单独的组件中。

Login.js

const [modalOpen, setModalOpen] = useState(false);
    return (
        <CustomScrollView>
            <ForgotPassword open={modalOpen}/> //Modal
            <ForgotPasswordText onPress={() => setModalOpen(true)}>Forgot Password?</ForgotPasswordText>
        </CustomScrollView>
    );

ForgotPassword.js

const ForgotPassword = ({open}) => {
    const [invisible, setInvisible] = useState({open});

    return (
        <Modal 
        statusBarTranslucent 
        transparent= {true} 
        visible={invisible} 
        animationType="fade"
        onRequestClose={() => {setInvisible(!open);}}>
            <CenteredModal>
                <ModalView>
                    <ForgotPasswordTitle>Forgot Password</ForgotPasswordTitle>
                </ModalView>
            </CenteredModal>
        </Modal>
        
    );     
}

Answer 1

两个组件都已安装。如果您要更改根组件中的 modalOpen 状态，则不会触发模式在 ForgotPassword 组件中以其实现方式打开。

一种解决方案是立即传递 modalOpen 道具，并在 Modal 组件中将其用于 visible 道具。但是您也需要从登录组件传递 setModalOpen 函数以保持状态。

const [modalOpen, setModalOpen] = useState(false);
    return (
        <CustomScrollView>
            <ForgotPassword open={modalOpen} setOpen={setModalOpen} /> //Modal
            <ForgotPasswordText onPress={() => setModalOpen(true)}>Forgot Password?</ForgotPasswordText>
        </CustomScrollView>
    );

const ForgotPassword = ({open, setOpen}) => (
        <Modal 
        statusBarTranslucent 
        transparent={true} 
        visible={open} 
        animationType="fade"
        onRequestClose={() => setOpen(!open)}>
            <CenteredModal>
                <ModalView>
                    <ForgotPasswordTitle>Forgot Password</ForgotPasswordTitle>
                </ModalView>
            </CenteredModal>
        </Modal>
    );

发现它在这里工作： https://codesandbox.io/s/broken-night-lu8e96

React Native：后退按钮关闭模态

React Native: Back Button Closes Modal

react-native