如何在抽屉屏幕顶部设置 DrawerItem

Question

我创建了一个带屏幕的抽屉，但还想在抽屉顶部添加用户图像。我在 Drawer.Navigator 中使用了 drawerContent 选项并使用了自定义函数并调用了它。问题是图像设置在底部而不是顶部。我试过在网上搜索，但没有找到将其设置在顶部的方法。这是代码：

const Drawer = createDrawerNavigator()

const CustomDrawerContent=(props) =>{
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        icon={({color})=> <Image style={{ width: 90, height: 90, borderRadius: 400 / 2 }} source={{ uri: auth.currentUser.photoURL }}></Image>}
        label=""
      />
      
    </DrawerContentScrollView>
  );
}

const DrawerNavigator = () => {
   return (
    
    <Drawer.Navigator initialRouteName='TabNavigator' drawerContent={CustomDrawerContent}> 
        <Drawer.Screen name='Início' component={TabNavigator}/>[enter image description here][1]
        <Drawer.Screen name="Lista de Espera" component={PermissionsStackScreen} />
        <Drawer.Screen name="Comunidade" component={CommunityStackScreen} />
        <Drawer.Screen name='Análises em Espera' component={AwaitingStackScreen}/>
        <Drawer.Screen name='Confirmar Análises' component={VerifyStackScreen}/>
        <Drawer.Screen name='Análises Rejeitadas' component={RejectedStackScreen}/>
        <Drawer.Screen name='Gerir Reagentes' component={ReagentStackScreen}/>
        <Drawer.Screen name='Gerir Equipamentos' component={EquipmentStackScreen}/>
    </Drawer.Navigator>
  );
  
}

export default DrawerNavigator

我还添加了代码外观的 link。 [1]: https://i.stack.imgur.com/9b9f5.jpg

任何帮助都会有用！

Answer 1

在这里简单地改变组件的顺序:

const CustomDrawerContent=(props) =>{
  return (
    <DrawerContentScrollView {...props}>
      {/* Render image item first */}
      <DrawerItem
        icon={({color})=> <Image style={{ width: 90, height: 90, borderRadius: 400 / 2 }} source={{ uri: auth.currentUser.photoURL }}></Image>}
        label=""
      />
      {/* then render others menu item */}
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

如何在抽屉屏幕顶部设置 DrawerItem

How to set DrawerItem on top of Drawer Screens

navigation-drawer

reactjs

react-native