Drawer Navigator 中的动态导航项答案

【问题标题】：Dynamic navigation items in Drawer NavigatorDrawer Navigator 中的动态导航项
【发布时间】：2018-02-01 23:34:53
【问题描述】：

我想从 api 的响应中填充 DrawerNavigator。抽屉物品如何动态加载？

例如

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

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我就是这样解决的-

在渲染方法中-

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
        }
    }        
}

【讨论】：

【解决方案2】：

不要直接向drawerComponent提供屏幕，而是使用contentComponent作为DrawerNavigator的选项为你的drawermenu提供一个自定义组件。然后，您可以随心所欲地设计和编辑drawerMenu。在该组件中，您可以进行 API 调用，获取菜单项列表并将它们加载到组件的渲染方法中，该方法将显示为抽屉菜单。

注意：你应该确保你不要经常调用这个 API，因为如果你这样做，在一段时间内，用户可能会得到一个空白的抽屉菜单，直到收到 API 响应。处理此问题的一种方法是将菜单保存在 Redux 存储中，并在应用启动时进行 API 调用，并将其存储/持久保存在 Redux 存储中。

希望这个答案对您有所帮助。

【讨论】：

能否请您进一步说明，最好举个例子，谢谢

【解决方案3】：

另一种方法是在抽屉导航器中使用 FlatList https://reactnative.dev/docs/flatlist.html 并使用正确的道具更新项目。

这个链接提供了样板：大约一半，搜索customdrawercontent，你应该找到它。 https://reactnavigation.org/docs/drawer-navigator/

以下是使用来自平面列表示例的任意数据和我项目的一部分内容完成的，遵循大部分样板。

const Drawer = createDrawerNavigator();

const DATA =
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];


function CustomDrawerContent(props) {
  console.log('comminf from custom drawer', props)

  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <FlatList
        data={DATA}
        keyExtractor={data => data.id.toString()}
        renderItem={({ item }) => {
          return (
            <DrawerItem label={item.title} onPress={()=> alert(item.id)}>

          </DrawerItem>
          )
        }}
        />
      <DrawerItem label="Help" onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

const newthing = "wtf how do i give my drawer stuff";


 function RoleNavigator () {

  //console.log('drawer user', userId)
  return (
  <Drawer.Navigator initialRouteName="Home" drawerContent={props => <CustomDrawerContent {...props} />}>

        <Drawer.Screen name="Home" component={WorkerView} />
        <Drawer.Screen name="BusinessView" component={BusinessView} />
        <Drawer.Screen name="SignOut" component={SignOutScreen} />
      </Drawer.Navigator>
  );
}

【讨论】：