带有条件渲染的 Modal 上的自定义回调答案

【问题标题】：Custom callBack on a Modal with conditional rendering带有条件渲染的 Modal 上的自定义回调
【发布时间】：2020-12-29 20:29:10
【问题描述】：

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

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

在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 后退按钮时，它仍然关闭模式...

【问题讨论】：

如果你使用 react native modal 它有一个支持 onBackButtonPress 当你应该把你的逻辑而不是使用那个监听器尝试移动到它并更新我们。
是的，我有一个原生的 Modal。所以我可以将 onBackButtonPress 作为道具传递给包含我的听众逻辑的函数？
这个包得到了那个道具github.com/react-native-community/react-native-modal，来自 RN 的模态错过了很多功能。
你能看一下编辑吗？

标签： react-native callback react-native-android conditional-rendering react-native-modal

【解决方案1】：

这应该可行。如果不把你所有的代码都放在里面，因为它们的分割部分很难连接你在做什么。

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

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

【讨论】：

我只是注意到，即使我在 onBackButtonPress 道具中使用 console.log ，它甚至不会返回任何内容。 ( onBackButtonPress={() => console.log('Something')} )
该道具是否已被弃用？
那么它怎么不返回什么？
你评论你的后听众？
onBackButtonPress={() => console.log('Something')}

【解决方案2】：

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>

【讨论】：