React Native开发中如何通过onPress事件将父组件字典值传递到子页面

你使用的React Navigation路由的navigate方法本身支持第二个入参，作为传递给目标页面的路由参数，直接按如下方式修改即可：

1. 修改父组件onPress逻辑 #

你原来的写法把Salad.GreekSalad放在箭头函数的形参位置，完全不会起到传值作用，调整后的代码如下：

<TouchableOpacity onPress={() => {
  // navigate第二个参数就是要传给子页面的参数对象，可自定义键名
  props.navigation.navigate("InnerMenu", {
    saladKey: "GreekSalad", // 传沙拉对应的键
    saladValue: Salad.GreekSalad // 传沙拉对应的属性数组
  })
}}>
  <ImageDetail 
    title={Salad.GreekSalad[0]} 
    description={Salad.GreekSalad[1]} 
    imageSource={Salad.GreekSalad[2]} 
    price={Salad.GreekSalad[3]}
  />
</TouchableOpacity>

2. 子页面InnerMenu接收参数 #

如果是函数组件，用useRoute钩子取参数即可：

import { useRoute } from '@react-navigation/native';

const InnerMenu = () => {
  const route = useRoute();
  // 解构获取父页面传过来的参数
  const { saladKey, saladValue } = route.params;
  // 后续可以直接使用参数，比如saladValue[0]就是沙拉名称，saladValue[3]是价格
  return <View>{/* 页面业务逻辑 */}</View>
}

如果是类组件，通过this.props.route.params获取即可。

可选优化方案 #

你当前每个沙拉条目都手动写代码非常冗余，可以直接遍历Salad对象批量渲染，后续加新沙拉品类只需要修改Salad对象即可：

{Object.entries(Salad).map(([saladKey, saladValue]) => (
  <TouchableOpacity 
    key={saladKey}
    onPress={() => {
      props.navigation.navigate("InnerMenu", { saladKey, saladValue })
    }}
  >
    <ImageDetail 
      title={saladValue[0]} 
      description={saladValue[1]} 
      // 适配没有上传图片的沙拉，自动用默认logo
      imageSource={saladValue[2] || require('../../assets/KabobHouseLogo.jpg')} 
      // 自动取数组最后一位作为价格，兼容不同长度的属性数组
      price={saladValue.at(-1)}
    />
  </TouchableOpacity>
))}

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