如何通过goBack()方法向上一页面传递数据？

你之前使用的this.props.navigation.navigate('Login', {name: this.state.name})是向前跳转至新页面时传递参数的方式，但goBack()是返回已存在的上一页，需要用以下两种常用方法实现数据回传：

方法一：通过回调函数传递（推荐） #

这种方式逻辑清晰，是最常用的实现方式：

1. 在上一级页面（比如Login页）跳转到当前页面时，传入一个回调函数作为参数：

// Login页面的跳转代码
this.props.navigation.navigate('目标页面名称', {
  onDataCallback: (data) => {
    // 在这里处理从目标页面传回的数据，比如更新本地状态
    this.setState({ receivedData: data });
  }
});

2. 在当前页面需要返回时，先调用回调函数传递数据，再执行goBack()：

// 当前页面的返回逻辑
const { navigation } = this.props;
// 调用上一页传入的回调，传递数据
navigation.getParam('onDataCallback')(this.state.name);
// 返回上一页
navigation.goBack();

方法二：更新父页面的路由参数（适合React Navigation 5+） #

如果使用的是React Navigation 5及以上版本，可以直接更新父页面的路由参数：

1. 当前页面中更新父页面参数并返回：

// 当前页面的返回逻辑
const parentNav = this.props.navigation.dangerouslyGetParent();
// 更新父页面的params
parentNav.setParams({ name: this.state.name });
// 返回上一页
this.props.navigation.goBack();

2. 在上一级页面（Login页）监听参数变化，处理传回的数据：

componentDidUpdate(prevProps) {
  // 检测params是否更新
  const newName = this.props.navigation.state.params?.name;
  const oldName = prevProps.navigation.state.params?.name;
  if (newName && newName !== oldName) {
    // 处理新传入的数据
    this.setState({ receivedName: newName });
  }
}

内容的提问来源于stack exchange，提问作者Divy Patel