react-native - React Native Navigation 覆盖 onBack

Question

我怎样才能覆盖 react navigate.goBack()。我的目标是将数据从孩子传递给父母，这将用于更新父母。

这里有一个类似的解决方案react-navigation-goback-and-update-parent-state，但是他们仍然调用this.props.navigation.goBack()，我希望能够使用标题栏中的后退按钮。

标签： react-nativereact-navigation

Answer 1

您可以通过使用回调函数来实现这一点。

例如：

父类：

在父类中添加回调函数，并使用 props 将该函数传递给子类。

...
...

//Navigating button 
 _didTapOnButton() {
    this.props.navigation.navigate("NextScreen", {
      callBackMethod: this._callBackMethod.bind(this)
    });
  }

//Call back method
_callBackMethod(dataFromChild) {
  //Your logic...
}

...
...

儿童班：

...
...

//Child class back button
 _didTapOnBackButton() {
   const { params } = this.props.navigation.state; // Take parameter from navigation
   params.callBackMethod('data 1'); // Call back function with data: 'data 1'
   this.props.navigation.pop();
 }
...
...