React Native StackNavigator：goBack()后如何刷新页面数据？

首先得帮你理清之前尝试无效的原因：你在ScreenA的componentDidMount里往navigation.state.params加_updateData，但这个时机不对——当你通过头部按钮跳转到ScreenB时，跳转动作的参数是在触发跳转时就确定的，后续修改ScreenA的navigation.state.params并不会同步到已经打开的ScreenB里，所以ScreenB根本拿不到你的刷新回调方法，调用自然没反应。

下面给你两种靠谱的解决思路，按需选择：

方案一：跳转时传递回调+自定义头部返回按钮 #

如果你还是想用回调的方式，得确保在跳转到ScreenB的那一刻就把刷新方法传进去，同时替换默认的头部返回按钮来触发回调：

1. 在ScreenA里跳转时传参
   不管是自定义的跳转按钮还是头部的跳转按钮，都要在navigate时带上回调：

// ScreenA的跳转逻辑（比如自定义按钮点击事件）
goToScreenB = () => {
  this.props.navigation.navigate('ScreenB', {
    onNavigateBack: this._updateData
  });
}

2. 在ScreenB里替换默认头部返回按钮
   默认的头部返回按钮不会触发你的回调，所以要自定义头部左侧按钮，先执行刷新再返回：

// ScreenB的navigationOptions
static navigationOptions = ({ navigation }) => ({
  headerLeft: () => (
    <TouchableOpacity 
      style={{paddingLeft: 15}}
      onPress={() => {
        // 先调用ScreenA的刷新方法
        navigation.state.params?.onNavigateBack?.();
        // 再返回上一页
        navigation.goBack();
      }}
    >
      <Text>返回</Text>
    </TouchableOpacity>
  )
});

// 可选：确保navigationOptions能拿到最新params
componentDidMount() {
  this.props.navigation.setParams({
    onNavigateBack: this.props.navigation.state.params?.onNavigateBack
  });
}

方案二：监听页面焦点事件（更推荐） #

这种方式不需要传递回调，只要ScreenA重新获得焦点（从ScreenB返回时）就自动刷新，逻辑更简洁也更可靠：

如果是类组件（你目前的写法）： #

// ScreenA组件
componentDidMount() {
  // 监听页面获取焦点的事件
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this._updateData();
  });
}

componentWillUnmount() {
  // 组件卸载时移除监听，避免内存泄漏
  this.focusListener.remove();
}

如果是函数组件（后续重构可选）： #

// ScreenA函数组件
import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
  React.useCallback(() => {
    // 每次页面获得焦点时执行刷新
    _updateData();
  }, [])
);

这个方案的优势是不管你从哪个页面返回ScreenA，只要页面重新显示就会自动刷新，完全不用管跳转和返回的逻辑，适配场景更多。

内容的提问来源于stack exchange，提问作者Kenji Crosland