React Navigation Drawer：动态路由和导航项？

Question

现在我面临一个问题。在我的应用程序被挂载之前，我正在从 API 中获取类别。现在我想拥有一个始终包含最新数据的动态应用程序。

我希望将不同的类别始终作为一个单独的屏幕。每个类别屏幕所需的功能始终相同。所以，我已经为自己构建了一个屏幕模板。

但是，我必须从 API 获取不同的类别，然后导入模板屏幕的次数与获取类别的次数一样多，以便为每个类别创建一个屏幕。此外，我需要将类别传递给模板屏幕，以便为每个类别设置一个正确的屏幕..

这可能吗？你能给我一个提示吗？

诚挚的问候和感谢！

Answer 1

我了解您希望抽屉导航相对于从 API 接收的数据是动态的。在这种情况下，您应该仅在 api 调用之后创建和呈现抽屉导航。

获取类别后，遍历它们并构建您的路线配置。您应该能够覆盖 navigationOptions 并为每个屏幕手动设置一些参数（包含您的特定类别）。

let routeConfig = {};

categories.map(category => {
    routeConfig[category.key] = {
        screen: CategoryScreen, // your template screen, common to every item
        navigationOptions: (props) => {
            props.navigation.setParams({ category });
        }
    }
});

const DrawerNav = createDrawerNavigation(routeConfig, { /*options*/ });

然后你必须手动渲染抽屉导航组件

render() {
    return (
        <DrawerNav screenProps={{}} />
    );
}

最后，在CategoryScreen 或任何您的屏幕组件中，您可以通过类似于经典导航案例的方式访问类别：this.props.navigation.state.params.category。

一些注意事项：

• DrawerNav 常量只是一个示例。您很可能希望将其设为类属性或在类外定义但填充在类内的普通变量。
• category.key 又是一个示例，您应该确保将其替换为每个类别的唯一内容，例如类别 ID 的字符串表示形式。
• 如果您希望每个类别有不同的屏幕组件，您只需根据当前.map() 迭代中的类别将不同的组件传递给screen。