React Native点击按钮传文本至其他屏幕报错：Cannot read property 'song' of undefined

错误根源 #

1. 参数传递路径错误：你从PostScreen导航到Root（Tab导航容器）时，参数会被传递给Root路由而非直接传给TabOneScreen，导致TabOneScreen无法拿到song参数。
2. 空值未处理：TabOneScreen首次加载时route.params为undefined，直接访问route.params.song会触发"Cannot read property 'song' of undefined"错误。

修复步骤 #

1. 修正PostScreen的导航逻辑 #

修改saveSong函数，直接指定跳转到TabOne并传递参数：

const saveSong = () => {
    navigation.navigate('Root', {
        screen: 'TabOne', // 明确指定目标Tab页面
        params: { song: song }
    });
};

2. 处理TabOneScreen的空值访问 #

在访问song参数前添加空值判断，避免报错：

// 替换原有的歌曲展示文本行
<Text style={{ fontSize: 20}}> 
  The song you recently posted is: {route.params?.song || '暂无歌曲'}
</Text>

也可以用条件渲染控制显示：

{route.params && (
  <Text style={{ fontSize: 20}}> 
    The song you recently posted is: {route.params.song}
  </Text>
)}

可选优化 #

如果需要在Tab切换时保留歌曲信息，建议使用React Context或AsyncStorage做全局状态存储，避免依赖导航参数传递数据。

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