React Navigation传参报错：登录页到首页获取参数未定义求助

问题场景 #

我尝试通过路由将参数name从登录页面传递到首页，但触发了数据未定义的错误，具体报错信息为：

TypeError: undefined is not object (evaluating 'navigation.state.params.name')

相关代码片段如下：

登录页面代码

<TouchableOpacity style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Home', { name: 'Erry' })}>
  <Text style={styles.buttonText}>MASUK</Text>
</TouchableOpacity>

路由配置代码

export const LoginStack = SwitchNavigator({
  Login: { screen: Login, },
  Home: { screen: HomeStack }
}, {
  headerMode: 'none',
  navigationOptions: { headerVisible: false, }
});
export const HomeStack = StackNavigator({
  Home: { screen: Home }
});

首页代码

static navigationOptions = ({navigation}) => ({
  title: `${navigation.state.params.name}`,
  headerStyle : { backgroundColor: '#f39c12', },
  headerTitleStyle :{ color: '#353b48', },
});

解决思路 #

• 问题根源：你当前是把参数直接传递给了HomeStack这个栈导航器，而非栈内部的Home页面。调用navigate('Home', {name: 'Erry'})时，参数会被存在HomeStack的导航状态里，Home页面的navigation.state.params自然就会是undefined。

• 方案1：直接传递参数到栈内目标页面
  修改登录页面的navigate调用，明确指定栈内的页面名称，同时通过screen参数关联对应的栈：

  onPress={() => this.props.navigation.navigate('HomeStack', {
    screen: 'Home',
    params: { name: 'Erry' }
  })}
  

  这样参数会直接被传递到Home页面的导航参数中。

• 方案2：在栈导航器中转发参数到子页面
  如果不想修改登录页面的代码，可以在HomeStack的配置里，把栈接收的参数转发给Home页面：

  export const HomeStack = StackNavigator({
    Home: { 
      screen: Home,
      navigationOptions: ({ navigation }) => ({
        title: `${navigation.state.params?.name || '默认标题'}`,
        headerStyle : { backgroundColor: '#f39c12', },
        headerTitleStyle :{ color: '#353b48', },
      })
    }
  });
  

  要是在Home组件内部需要使用参数，也可以通过navigation.dangerouslyGetParent().state.params获取，但更推荐第一种方案，逻辑更直观。

• 额外优化：添加参数默认值
  为了避免参数未传递时触发报错，建议在获取参数时加上默认值，比如用可选链操作符做兼容：

  title: `${navigation.state.params?.name || '访客'}`,
  

  这样即使参数不存在，页面也能正常渲染。

内容的提问来源于stack exchange，提问作者Erry H