当按下 header 后退按钮时，本机路由器通量会执行保存功能

Question

我找到了一种在您启动操作页面时执行此操作的方法，例如Actions.Home({onBack: () => console.log('custom back callback') });但是我认为这对我不起作用。这是客户希望如何完成应用程序的屏幕模型：其中后退按钮将用作数据输入页面的保存按钮。

我不相信我可以在启动页面时传入一个函数来处理他们输入的数据。

我需要的是处理数据并保存，然后继续返回上一页，或者如果数据无效那么我想说"Stay and make changes, or leave without saving?"。

一旦我登陆页面并有权访问他们将使用的字段，我如何提供该 onBack 功能？

Answer 1

我找到了（或者至少 a）的方法。在 componentDidMount 中，你想要刷新页面并提供你的 onBack 函数，因为你可以访问它：

componentDidMount() {
    setTimeout(()=> {
        Actions.refresh({onBack:()=>this.onBack()})
    });
}

编辑： Google 将 RNRF 更新到 4.1.0-beta.8 后带我回到这里（如果你愿意，请插入 Thanos meme），发现上面的代码似乎没有执行。解决方法是从 react-native 导入 InteractionManager 并将其包装在旧代码周围，如下所示：

componentDidMount() {

        InteractionManager.runAfterInteractions(()=> {
            Actions.refresh({onBack:()=>{
                this.props.handleReturnedImage({ uri: this.state.uri });
                Actions.pop();
            }});
        })

    }

Answer 2

在 render() 方法中，您可以添加一个包含后退按钮的导航栏，当单击该后退按钮时，将调用一个 'onTap()' 函数，然后您可以在 onTap( ）功能。要返回，可以使用 Actions.pop() 方法。

所以你可以像处理数据一样做 Actions.pop() 否则做其他事情。

当按下 header 后退按钮时，本机路由器通量会执行保存功能

react native router flux perform save function when header back button is pressed

react-native

react-native-router-flux