React Native跨屏传参问题：跳转PostsScreen时itemId为空

嘿，我来帮你排查这个跳转后itemId为null的问题！结合你提到的React基础薄弱和使用的旧版本react-navigation（从NavigationActions、StackNavigator这些API能看出来是v1/v2版本），我把常见的问题点和解决方案整理如下：

1. 先检查「跳转时的传参逻辑」 #

大概率是你在Categories Screen点击分类项时，没有正确传递itemId参数。比如在FlatList的点击事件里，你需要确保用navigate方法时带上参数对象：

// 举个FlatList renderItem的示例
renderItem = ({ item }) => (
  <Button
    title={item.categoryName}
    onPress={() => {
      // 关键：第二个参数是params对象，必须包含itemId
      this.props.navigation.navigate('PostsScreen', { itemId: item.id });
    }}
  />
)

如果你是用NavigationActions.dispatch手动触发跳转，也要记得加params：

const navigateToPosts = NavigationActions.navigate({
  routeName: 'PostsScreen',
  params: { itemId: item.id } // 这里不能漏！
});
this.props.navigation.dispatch(navigateToPosts);

2. 再检查「PostsScreen获取参数的方式」 #

旧版本react-navigation的参数存在this.props.navigation.state.params里，如果你误用了新版本的route.params，就会拿到null。正确的获取方式应该是：

// 在PostsScreen的componentDidMount或render里
componentDidMount() {
  // 加|| {}是为了防止params不存在时报错
  const { itemId } = this.props.navigation.state.params || {};
  console.log('拿到的itemId：', itemId);
  // 接下来就可以用itemId请求对应分类的文章列表了
}

3. 最后确认「路由配置是否正确」 #

确保你的Stack/DrawerNavigator里已经正确注册了PostsScreen，并且跳转时用的路由名称和配置里的完全一致（大小写也要匹配）：

const AppNavigator = StackNavigator({
  CategoriesScreen: { screen: CategoriesScreen },
  PostsScreen: { screen: PostsScreen }, // 必须正确注册这个页面
});

常见坑点总结 #

• 传参时忘记写params对象，或者键名写错（比如写成id而不是itemId）
• 混淆了新旧版本react-navigation的参数获取API（旧版本是navigation.state.params，新版本是route.params）
• 路由名称拼写错误（比如跳转时写的是PostScreen，但配置里是PostsScreen）

你可以对照上面的点逐一排查，应该就能解决itemId为null的问题啦！

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