React Native硬编码数据库：如何获取菜单子项（饮品规格文本）

核心思路 #

先把包含菜单主项和子规格的数据集硬编码定义好，跳转时传递选中菜单的唯一标识，在加购界面通过这个标识匹配到对应的菜单条目，就能直接取出该菜单下的所有饮品规格文本。

具体代码实现 #

1. 定义硬编码的菜单数据库

// 模拟硬编码的菜单数据，包含主项和对应的饮品规格
const menuDatabase = [
  {
    id: 'coffee_americano',
    title: '美式咖啡',
    imageUrl: '这里替换为你的硬编码图片地址',
    specs: ['热/大杯', '热/中杯', '冰/大杯', '冰/中杯', '常温/中杯']
  },
  {
    id: 'coffee_latte',
    title: '拿铁咖啡',
    imageUrl: '这里替换为你的硬编码图片地址',
    specs: ['热/大杯（全糖）', '热/中杯（半糖）', '冰/大杯（去糖）', '冰/中杯（少糖）']
  },
  // 其他菜单条目依此类推
];

2. 横向FlatList的跳转逻辑
   点击菜单时，把当前菜单的id作为参数传递到加购界面：

// FlatList的renderItem里的点击事件
const onMenuPress = (menuItem) => {
  // 假设用React Navigation跳转，传递选中菜单的id
  navigation.navigate('AddToCart', { selectedMenuId: menuItem.id });
};

3. 加购界面获取并渲染规格
   在加购界面接收参数，从硬编码数据库里匹配对应菜单，取出规格列表：

import { View, Text, Image, FlatList } from 'react-native';

const AddToCartScreen = ({ route }) => {
  // 获取跳转时传递的菜单id
  const { selectedMenuId } = route.params;
  // 从硬编码数据库找到对应的菜单
  const targetMenu = menuDatabase.find(menu => menu.id === selectedMenuId);
  // 取出该菜单下的所有规格，默认空数组防止报错
  const drinkSpecs = targetMenu?.specs || [];

  return (
    <View style={{ padding: 16 }}>
      {/* 展示菜单图片和标题 */}
      <Image 
        source={{ uri: targetMenu.imageUrl }} 
        style={{ width: '100%', height: 200, borderRadius: 8 }} 
      />
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 12 }}>{targetMenu.title}</Text>
      
      {/* 展示饮品规格列表 */}
      <Text style={{ fontSize: 16, marginTop: 16, marginBottom: 8 }}>选择规格：</Text>
      <FlatList
        data={drinkSpecs}
        horizontal={false}
        renderItem={({ item }) => (
          <View style={{ 
            padding: 12, 
            borderWidth: 1, 
            borderColor: '#eee', 
            borderRadius: 6, 
            marginBottom: 8 
          }}>
            <Text>{item}</Text>
          </View>
        )}
        keyExtractor={(item, index) => `${selectedMenuId}_spec_${index}`}
      />
    </View>
  );
};

export default AddToCartScreen;

效果参考 #

如果你的硬编码数据结构和示例不同，只需要调整find方法的匹配条件，以及子规格对应的字段名（比如把specs改成你实际用的字段）即可。

内容的提问来源于stack exchange，提问作者Seong Chan Cho