Question

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

例如

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

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

Answer 2

不是直接向抽屉构件提供屏幕，而是使用contentComponent作为DrawerNavigator选项为您的抽屉菜单提供自定义组件。然后你可以设置和编辑抽屉菜单，无论如何你想要它。在该组件中，您可以进行API调用，获取菜单项列表并将其加载到组件呈现方法中，该方法将显示为drawerMenu。

注意：您应该确保不经常调用此API，因为如果您这样做了一段时间，用户可能会收到空白抽屉菜单，直到收到API响应。解决此问题的一种方法是将菜单保存在Redux存储中，并在应用程序启动时进行API调用，并将其存储/保存在redux存储中。

我希望你发现这个答案很有帮助。

Answer 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>
  );
}

Drawer Navigator中的动态导航项

3 个答案: