React Native TabNavigator传参异常：this.props.navigation.state.params未定义

我帮你排查下这个问题，在你使用的react-navigation@^1.0.0-beta.22版本里，TabNavigator确实有个特性会导致这个问题：当Tab页面已经被初始化过，切换Tab时组件不会重新渲染，也不会自动更新navigation.state.params，所以你直接取params.name就会触发undefined错误。

问题原因 #

你从Home页用navigate('Design', {name: 'Jane'})跳转是正确的，但如果Design页之前已经被打开过（哪怕是隐藏状态），组件不会重新初始化，this.props.navigation.state.params不会自动更新为最新传递的值；如果是第一次打开Design页，params应该是存在的，但如果后续再跳转传新参数，还是会出现同样的问题。

解决方案：监听Tab聚焦事件获取最新参数 #

我们可以通过监听didFocus事件（react-navigation 1.x的TabNavigator内置事件），每次Tab被聚焦时获取最新的参数，这样就能保证拿到最新传递的值。

修改你的ImageDesign组件如下：

export default class ImageDesign extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      name: '' // 用state存储参数值
    }; 
  } 

  componentDidMount() {
    // 页面初始化时先获取一次参数
    const initParams = this.props.navigation.state.params;
    if (initParams?.name) {
      this.setState({ name: initParams.name });
    }

    // 监听Tab聚焦事件，每次切换过来都更新最新参数
    this._focusListener = this.props.navigation.addListener('didFocus', () => {
      const latestParams = this.props.navigation.state.params;
      if (latestParams?.name) {
        this.setState({ name: latestParams.name });
      }
    });
  }

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

  static navigationOptions = { tabBarVisible: false }; 

  render() { 
    return ( 
      <View> 
        <Text>{ this.state.name }</Text> 
      </View> 
    ); 
  } 
}

纠正你的错误写法 #

你尝试的这段代码是不正确的：

navigate('Design', {}, {type: "Navigate", routName:"ImageDesign", params: {name: 'Jane'}})

这里不仅拼写错误（routName应该是routeName），而且在TabNavigator中不需要额外传递action参数，直接使用navigate('Design', {name: 'Jane'})就可以正确传递参数。

额外提示 #

如果你的场景是需要每次跳转都强制刷新Design页，也可以考虑在TabNavigator的配置里添加lazy: true（默认是true），但这会导致每次切换Tab都重新初始化组件，可能影响性能，所以更推荐上面的监听事件方案。

内容的提问来源于stack exchange，提问作者I.Dayan