Drawer Navigator 中的动态导航项 [英] Dynamic navigation items in Drawer Navigator

问题描述

我想从 api 的响应中填充 DrawerNavigator.如何动态加载抽屉项目?

I want to populate DrawerNavigator from response from an api. How can the drawer items be loaded dynamically?

例如

    'someName1': { screen: (props) => <someView {...props} viewId='someId2' /> },
    'someName2': { screen: (props) => <someView {...props} viewId='someId2' /> },

推荐答案

我是这样解决的-

在渲染方法中-

const Nav = DrawerNavigator(this.getNavItems(this.state.drawerSource.navItems));

        const AppNavigator = (StackNavigator(
            {
                Drawer: { screen: Nav },
            },
            {
                initialRouteName: "Drawer",
                headerMode: "none",
            })
        );

        return (<AppNavigator />);

getNavItems(navItems) {
    return navItems.reduce((routes, navItem) => {
        routes[navItem.id] = this.getNavItem(navItem);

        return routes;
    }, {});
}

getNavItem(navItem) {
    return {
        screen: (props) => <MyScreen {...props} id={navItem.id} />,
        navigationOptions: {
            ***any navigation properties
        }
    }        
}

这篇关于Drawer Navigator 中的动态导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！