React Native组件通过Props实现基于产品标题的动态页面跳转

需求说明 #

开发一款从WordPress数据库拉取产品数据的React Native应用，首页通过FlatList展示产品卡片，需为每个卡片添加按钮，点击后动态跳转到对应产品页面。要求通过props传递参数实现跳转，跳转目标基于API返回的产品标题设置。当前SuitcaseItem组件的按钮固定跳转到"Evo L"页面，需改为根据产品标题动态跳转。

实现步骤 #

1. 传递导航实例与动态目标参数 #

在AllSuitcasesScreen的FlatList渲染项中，将导航实例navigation和产品标题作为跳转目标参数传给SuitcaseItem组件：

修改AllSuitcasesScreen中的FlatList代码：

<FlatList
  data={suitcases}
  renderItem={({ item }) => (
    <SuitcaseItem
      title={item.title.rendered}
      imageUri={{uri: 'https://www.samsonite.be/on/demandware.static/-/Sites/default/dw851ab6f0/images/misc/sams_share-image.jpg'}}
      desc={item.slug}
      buttonText={item.title.rendered}
      navigation={navigation} // 传递导航实例
      targetScreen={item.title.rendered} // 传递动态跳转页面名称
    />
  )}
/>

2. 修改组件内的跳转逻辑 #

在SuitcaseItem组件中，接收传入的navigation和targetScreen props，替换固定的跳转目标：

修改SuitcaseItem中的Pressable代码：

<Pressable style={styles.seeProduct} onPress={() => props.navigation.navigate(props.targetScreen)}>
  <Text style={styles.text}>Bekijk product: {props.buttonText}</Text>
</Pressable>

关键注意点 #

• 确保导航栈中已注册所有产品标题对应的页面组件，否则会跳转失败。
• 若产品标题含空格或特殊字符，建议先格式化处理（如转小写、替换空格为连字符），避免导航报错：

// 在AllSuitcasesScreen中处理标题
targetScreen={item.title.rendered.replace(/\s+/g, '-').toLowerCase()}

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