如何将DrawerItem设置在React Navigation抽屉的Drawer Screens上方

问题出在组件的渲染顺序上，自定义抽屉内容的展示顺序和代码的书写顺序完全一致，你当前先渲染了所有抽屉菜单的列表组件DrawerItemList，再渲染头像，所以头像自然出现在菜单底部，只需将头像模块移到DrawerItemList之前即可。
另外头像不需要嵌套在DrawerItem组件中，直接渲染图片灵活性更高，也可以根据需求补充用户名、用户等级等信息，修改后的代码如下：

const Drawer = createDrawerNavigator()

const CustomDrawerContent=(props) =>{
  return (
    <DrawerContentScrollView {...props}>
      {/* 头像模块调整到菜单列表最前面 */}
      <Image 
        style={{ 
          width: 90, 
          height: 90, 
          borderRadius: 45, 
          marginHorizontal: 16,
          marginVertical: 20
        }} 
        source={{ uri: auth.currentUser.photoURL }}
      />
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

const DrawerNavigator = () => {
   return (
    
    <Drawer.Navigator initialRouteName='TabNavigator' drawerContent={CustomDrawerContent}> 
        <Drawer.Screen name='Início' component={TabNavigator}/>
        <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

如果需要给头像区域添加背景色、用户名称等内容，可在Image外层嵌套View组件自定义样式即可。

内容的提问来源于stack exchange，提问作者José Freitas