反应抽屉式导航栏:动态路线和导航项目?

问题描述 投票:1回答:1

现在我面临的一个问题..我的应用程序被安装之前,我从一个API获取类别。现在我想有一个动态的应用程序,它总是包含最新的数据。

我想总是有不同的类别为分离屏幕。我需要为每个类别屏幕的功能始终是相同的。所以,我有自己建一个屏幕模板。

但是,我不得不获取不同类别从API,然后导入我的模板屏幕多次,我要取的类别创建为每个类别的屏幕。此外,我需要的类别传递给模板屏幕设置一个正确的屏幕为每个类别..

这是可能的,你可以给我如何做到这一点的提示?

亲切的问候和感谢!

javascript reactjs react-native react-navigation
1个回答
0
投票

据我所知,你希望你的抽屉导航是相对于从API接收到的数据是动态的。在这种情况下,你应该只创建和渲染API调用后抽屉导航。

获取这些类别后,遍历它们,建立自己的路由配置。您应该能够覆盖navigationOptions和手动设置每个屏幕有些PARAMS(含特定类别)。

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或任何你的屏幕组件中,您可以在类似CLASIC导航情况的方式访问类别:this.props.navigation.state.params.category

一些注意事项:

  • 所述DrawerNav常数仅仅是一个例子。最有可能你会想使它成为一个类属性或类外定义,但内填充的普通变量。
  • category.key是再次一个例子,你应该确保具有独特的每一类的东西来取代它,如类ID的字符串表示。
  • 如果你想为每个类别不同的​​屏幕组件,你可以简单地通过不同的组件基于当前screen迭代类别.map()
© www.soinside.com 2019 - 2024. All rights reserved.