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的字符串表示形式。
如果您希望每个类别具有不同的屏幕组件，则可以根据当前screen迭代中的类别，将不同的组件简单地传递给.map()。 / li>

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

1 个答案: