React Native Navigation覆盖onBack

Posted 2021-04-04

如何覆盖反应navigate.goBack()。我的目标是将数据从子传递到父级，用于更新父级。

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

答案

您可以通过使用回调功能来实现此目的。

例如：

家长班：

在父类中添加回调函数，并使用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();
 }
...
...

另一答案

使用带有componentWillUnmount的callBack解决了我的问题