具有条件渲染的模态上的自定义回调

问题描述

我正在构建一个乘车共享应用程序，以学习本机反应。为了发布新的Ride，我有一个Modal，它有条件地呈现为step状态，并且每个步骤都有不同的UI。喜欢：

let screen;
if (step===1){
        ecraStep=<Screen1/>
} if (step===2){
        ecraStep=<Screen2/>
} ...

在step=1（这是初始值）上，我希望CallBack按钮关闭Modal，并且只要step> 1我都希望它调用以下函数：

function togglePrevIoUsstep() {
   setStep(step-1);
};

从本质上讲，这将返回到最后一个渲染的屏幕。我已经通过将其写在Modal函数组件中来进行尝试：

useFocusEffect(
        React.useCallback(() => {
          const onBackPress = () => {
            if (step>1) {
              togglePrevIoUsstep();
              return true;
            } else if (step===1) {
                props.closeModal();
              return false;
            }
          };
          BackHandler.addEventListener('hardwareBackPress',onBackPress);
          return () =>
            BackHandler.removeEventListener('hardwareBackPress',onBackPress);
        },[step,togglePrevIoUsstep])
      );

但是，无论step状态如何，每当我按下backButton时，它都会关闭Modal。我不明白我在做什么错。

已编辑

我实现了Modal中的react-native-modal。我这样使用道具onBackButtonPress：

<Modal 
        onBackButtonPress={props.onBackButtonPress} 
        visible={showModal} 
        //...
        >
                    <NewRidesModal
                        //...
                        />
                </Modal>

在模态屏幕中，我写道：

if (step===1) {
        onBackPressButton=(() => props.closeModal());
    } else if (step>1){
        onBackPressButton=(() => togglePrevIoUsstep())
    }

但是，当我按下android后退按钮时，它仍然关闭模态...

解决方法

这应该有效。如果不把所有代码都包含进去，因为它们的拆分部分很难连接您在做什么。

<Modal 
        onBackButtonPress={() => {
        if (step===1) {
         props.closeModal();
        } else if (step>1){
          togglePreviousStep()
        }

        }} 
        visible={showModal} 
        //...
        >
                    <NewRidesModal
                        //...
                        />
                </Modal>

,

onBackBackButtonPress实际上已被弃用或删除。

后来，我在https://reactnative.dev/docs/modal#onrequestclose上阅读了更多有关模态文档的信息，发现：

当用户点击硬件时，调用onRequestClose回调 Android上的“后退”按钮或Apple TV上的菜单按钮。

在提出这个问题之前，我应该对此进行调查。我所需要的全部可以通过onRequestClose道具来完成，如下所示：

<Modal 
    onRequestClose={() => {
      if (step===1) {
        toggleModal();
    } else if (step>1 && step<8){
        togglePreviousStep(); 
    }
    }}
>
    //...
</Modal>