React Native如何渲染动态目录菜单？求最佳实践方案

这种动态嵌套的分类场景，绝对不要搞多个独立页面，复用单个分类页面组件才是最简洁高效的方案，完全适配你通过API动态加载目录的需求。具体实现思路如下：

• 核心逻辑：单组件复用
  只需要创建一个CategoryScreen组件，所有层级的分类都用这个页面展示。每次进入不同层级的分类，只需要给这个组件传递当前分类的唯一标识（比如categoryId），组件内部根据这个ID去拉取对应的数据（子分类列表、分类名称）。

• 参数传递与导航跳转
  从父分类页面点击子分类时，调用navigation.navigate('Category', { categoryId: 子分类ID })即可。不管层级多深，都是重复这个操作——每次跳转都把下一级分类的ID传给同一个CategoryScreen。

• 动态更新页面内容与标题
  在CategoryScreen里用useEffect监听传入的categoryId变化，触发数据请求并更新页面状态：

  const { categoryId } = route.params;
  const [categoryData, setCategoryData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // 每次categoryId变化时重新请求数据
    const fetchCategory = async () => {
      setLoading(true);
      const res = await fetch(`/api/categories/${categoryId}`);
      const data = await res.json();
      setCategoryData(data);
      setLoading(false);
      // 动态设置页面标题
      navigation.setOptions({ title: data.name });
    };
    fetchCategory();
  }, [categoryId, navigation]);
  

  这样每次进入不同分类，页面会自动重新请求数据，更新子菜单列表和标题。

• 子分类列表渲染
  数据加载完成后，直接渲染子分类列表，每个子项点击时再次跳转到CategoryScreen并传递对应的ID：

  if (loading) return <ActivityIndicator />;
  return (
    <FlatList
      data={categoryData.children}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => navigation.navigate('Category', { categoryId: item.id })}
        >
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )}
    />
  );
  

• 额外优化建议

  • 加数据缓存：用useMemo或者全局状态（如Zustand、Redux）缓存已加载过的分类数据，避免重复请求API。
  • 处理异常情况：API请求失败时显示错误提示，加载中展示骨架屏或加载指示器。
  • 顶层分类处理：可以把categoryId设为默认值（比如0），让CategoryScreen在无传参时自动加载顶层分类数据。

这种方案的优势在于：完全不需要维护多个页面，新增分类层级或修改目录结构时，前端代码无需任何改动，完全靠API返回的数据驱动页面展示，完美匹配你“无需更新应用即可修改目录”的需求。

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