如何用params弹出到上一个屏幕？

Question

我在屏幕A上，其当前状态为{key：'value'}，我导航到屏幕B

现在我想再次从屏幕B弹出到屏幕A，但我不想丢失屏幕A中的当前状态{key：'value'}

一些解决方案是在AsyncStorage中保存数据，并在返回到屏幕A时检索它，但这不是一个好习惯

.pop（）这样做，但是如果我需要回去使用额外的参数呢？

Navigation.pop(this.props.componentId , {
                               passProps: {
                                       data : 'current',
                                       more : 'just-example'
                                     }});

上面的代码，没用

有什么建议 ？

我不使用任何状态管理工具，如Redux / Mobx ..

Answer 1

我一直在努力，我用react-navigation取得了成就。

基本上，组件A将向组件B发送组件A的导航状态。因此，对于B视点，它将是堆叠B组件之前的prevState。

因此，当组件B使用先前的导航状态“返回”导航到组件A时，就好像您的导航状态永远不会改变，现在您可以使用navigate的第二个参数将params发送回组件A.

这个简单的例子说明了这种做法，我认为这是完全有效的，没有使用AsyncStorage。

// In Component A use a custom prevState when goes to Component B
const { navigation } = this.props;

navigation.navigate('ComponentB', { prevState: navigation.state });

// In Component B use this custom goBack to "pop" to last screen
function goBack(data) {
  const { navigation } = this.props;

  const { routeName, key } = navigation.getParam('prevState');

  navigation.navigate({ routeName, key, params: data });
}

// And finally in Component A again you could get data like this
function getDataFromComponentB() {
  const { navigation } = this.props;

  // It is null if no parameters are specified!
  return navigation.state.params;
}

Answer 2

我发现一个很好的解决方案是使用params发送回调函数

在屏幕A中

  getback(success)
  {
      alert(success);
  }

  Navigation.push(this.props.componentId , { component : {
         name : "Payment",
         passProps: {
         subscription : current,
         getback: this.getback
       },
   }});

然后在屏幕B中，当你弹出屏幕A点火回弹功能

Navigation.pop(this.props.componentId);
this.props.getback(true);

这对我很好

Answer 3

正如特伦斯所说。您可以在道具中使用回调并在弹出回到上一页之前将其触发

回答来源：React Native Pass properties on navigator pop