抽屉导航器中的动态导航项

Question

我想根据 api 的响应填充 DrawerNavigator。如何动态加载抽屉项目？

例如

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

Answer 1

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

注意：您应该确保不要经常调用此 API，因为如果您这样做，用户可能会在收到 API 响应之前得到一个空白的 drawerMenu 一段时间.处理此问题的一种方法是将菜单保存在 Redux store 中，并在应用程序启动时进行 API 调用，并将其 stored/persisted 保存在 redux store 中。

希望此回答对您有所帮助。

Answer 2

我是这样解决的-

渲染方法中-

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

Answer 3

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

这个 link 提供样板：它大约在一半的地方，搜索 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>
  );
}

抽屉导航器中的动态导航项

Dynamic navigation items in Drawer Navigator

react-native

react-navigation