如何基于数据库食物数动态创建React Native Stack Navigator屏幕？

你的代码存在几个核心问题，导致无法正常渲染动态屏幕，以下是问题分析和修复后的完整代码：

核心问题 #

• 变量作用域错误：foodList是handleData内部的局部变量，组件渲染时无法访问
• 组件传递方式错误：HomeStack.Screen的component属性需要接收组件类型，而非直接传入JSX元素
• 未声明变量：foods变量未用let/const声明，会导致全局污染
• 循环变量误用：循环中使用了未定义的index变量，实际应为i
• Key值不稳定：使用Object.keys(foods[i])作为key易引发渲染异常

修复后的代码 #

import { StyleSheet, Text, View, useEffect, useState } from 'react-native';
import { SafeAreaView } from "react-native-safe-area-context";
import { initializeApp } from "@firebase/app";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { getDatabase, ref, onValue } from "@firebase/database";

const appSettings = {
  databaseURL: "" // 填入你的数据库URL
};

const app = initializeApp(appSettings);
const db = getDatabase(app);
const foodsInDb = ref(db, "foods");

const HomeStack = createNativeStackNavigator();

// 独立封装食物详情屏幕组件
const FoodScreen = ({ route }) => {
  const { foodBrand, foodName } = route.params;
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{foodName}</Text>
      <Text style={{ fontSize: 16, marginTop: 10 }}>{foodBrand}</Text>
    </SafeAreaView>
  );
};

export default function Search() {
  // 用useState管理动态屏幕列表
  const [foodScreens, setFoodScreens] = useState([]);

  useEffect(() => {
    const handleData = (snapshot) => {
      // 处理数据库为空的情况
      const foods = Object.values(snapshot.val() || {});
      // 生成动态屏幕数组
      const screens = foods.map((food, index) => {
        const foodBrand = food[0];
        const foodName = food[1];
        return (
          <HomeStack.Screen
            key={`food-${index}`}
            name={`Food-${index}`}
            component={FoodScreen}
            initialParams={{ foodBrand, foodName }}
          />
        );
      });
      setFoodScreens(screens);
    };

    // 监听数据库变化，返回取消监听函数
    const unsubscribe = onValue(foodsInDb, handleData);
    return () => unsubscribe();
  }, []);

  return (
    <HomeStack.Navigator initialRouteName={foodScreens[0]?.name || ""}>
      {foodScreens}
    </HomeStack.Navigator>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "blue",
    padding: 10,
    borderRadius: 5,
    marginTop: 10,
  },
  buttonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
  },
});

关键修改说明 #

1. 状态管理：使用useState存储动态生成的屏幕组件，确保渲染时能获取最新数据
2. 组件封装：将单个食物的显示逻辑封装为FoodScreen，通过route.params接收数据，符合React Navigation规范
3. 数据安全处理：添加snapshot.val() || {}避免数据库为空时的报错
4. 监听清理：组件卸载时取消数据库监听，防止内存泄漏
5. 初始路由设置：自动设置第一个屏幕为初始路由，确保有数据时直接显示内容

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