0

我正在构建一个乘车共享应用程序来学习 react-native。为了发布一个新的 Ride，我有一个根据状态Modal呈现的条件，step并且每个步骤都有一个不同的 UI。像：

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

On 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. 我不明白我做错了什么。

已编辑

我实施了Modalfrom 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 后退按钮时，它仍然会关闭模式...

4

2 回答 2

0

这应该有效。如果不将所有代码都涉及，因为它们的分割部分很难连接你在做什么。

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

        }} 
        visible={showModal} 
        //...
        >
                    <NewRidesModal
                        //...
                        />
                </Modal>
于 2020-09-11T12:51:00.223 回答
0

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

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

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

在提出这个问题之前，我应该对此进行调查。我需要的所有东西都可以用onRequestClose如下的道具来完成：

<Modal 
    onRequestClose={() => {
      if (step===1) {
        toggleModal();
    } else if (step>1 && step<8){
        togglePreviousStep(); 
    }
    }}
>
    //...
</Modal>
于 2020-09-13T09:55:53.420 回答