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

Question

我正在构建一个拼车应用程序来学习 react-native。为了发布一个新的 Ride，我有一个 Modal，它在 step 状态下有条件地呈现，并且每个步骤都有一个不同的 UI。喜欢：

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

On step=1（初始值）我希望回调按钮关闭 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 状态如何，每当我按下后退按钮时，它都会关闭 Modal。我不明白我做错了什么。

已编辑

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

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

我在模态屏幕中写道：

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

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

Answer 1

这应该有效。如果不把你所有的代码都参与进来，因为它们的分割部分很难连接你在做什么。

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

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

Answer 2

onBackBackButtonPress 实际上已弃用或删除。

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

The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.

我应该在提出这个问题之前调查过这个问题。我需要的一切都可以使用 onRequestClose 道具完成，如下所示：

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

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

Custom callBack on a Modal with conditional rendering

react-native

callback

react-native-android

conditional-rendering

react-native-modal