React Native中路由参数无法在页面显示的问题排查

根据你描述的情况——能通过console.log获取路由参数但页面无法显示，结合给出的代码，我整理了几个常见的排查方向和解决方案：

1. 确认参数解构与键名匹配 #

虽然你能打印到参数，但有可能解构时的变量名和route.params里的实际键名不匹配。比如如果传递的参数是productName而不是name，那解构出来的name就是undefined，自然不会显示。

建议先在组件里直接打印完整参数对象确认键名：

console.log("完整路由参数：", route.params);

如果键名确实和你解构的name/market/price一致，也可以先跳过解构，直接通过route.params.name的方式引用，避免解构语法可能带来的隐性问题。

2. 检查自定义Title组件的实现问题 #

你用到了自定义的Title组件，这很可能是问题所在。如果Title组件没有正确接收并渲染children属性，比如它的实现是这样的：

// 错误示例：只接收text属性，不处理children
const Title = ({ text }) => <Text style={styles.title}>{text}</Text>;

那你用<Title>{name}</Title>的写法就不会显示内容，因为组件期望的是text属性而非children。

临时测试方案：把Title替换成React Native原生的Text组件，看看内容是否能显示。如果能显示，就需要修改Title组件，确保它渲染children：

// 正确示例：渲染children
const Title = ({ children, style }) => <Text style={[styles.title, style]}>{children}</Text>;

3. 排查样式导致的内容隐藏 #

你给Title和外层View加了overflow: 'hidden'，如果组件的空间不足以容纳文字，或者布局出现异常，文字可能被截断或完全隐藏。

可以先尝试：

• 去掉overflow: 'hidden'样式，看看内容是否出现
• 给Title组件添加背景色（比如backgroundColor: 'red'），确认组件是否在页面上占据了空间
• 调整flex比例，比如把flex:3改成更大的值，确保文字有足够的显示空间

4. 确认图片资源的有效性 #

虽然图片不显示不会影响文字，但如果MARKET_LOGOS[market]对应的图片路径错误或资源不存在，可能间接暴露market参数是否正确传递。建议给图片添加一个 fallback 资源，避免因图片加载失败导致的布局偏移：

<Image 
  source={MARKET_LOGOS[market] || require('./assets/fallback-logo.png')}
  style={{ borderRadius: 50, width: 50, height: 50 }} 
/>

测试用修改代码 #

这里给你一个调整后的测试版本，你可以逐步验证：

export const ProductPage = ({ route, navigation }) => { 
  const theme = useTheme(); 
  // 先打印参数确认
  console.log("路由参数：", route.params);
  const { name, market, price } = route.params; 

  return ( 
    <View style={{ position: 'relative', padding: 10 }}> {/* 加padding避免内容贴边 */}
      <View style={{ flex: 1, flexDirection: 'row', marginTop: 10 }}> 
        {/* 先换成原生Text测试 */}
        <Text style={{ flex: 3, fontSize: 18, fontWeight: 'bold' }}> 
          {name || "未获取到名称"} {/* 加默认值，避免undefined显示空白 */}
        </Text> 
        <View style={{ flex: 1, alignItems: 'flex-end' }}> {/* 靠右对齐，优化布局 */}
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}> 
            {price || "0"} {'\u20BA'} {/* 价格加默认值 */}
          </Text> 
          <Image 
            source={MARKET_LOGOS[market] || require('./assets/fallback-logo.png')}
            style={{ borderRadius: 50, width: 50, height: 50, marginTop: 5 }} 
          /> 
        </View> 
      </View> 
    </View> 
  ); 
}

按照这个步骤排查，应该能快速定位到问题所在。

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