Как добавить заголовки в моем ящике, используя реагировать родной?

Question

Я использую реагирующую нативную версию для разработки мобильного приложения, поэтому в своем ящике я хочу описать группы функций и назвать каждую группу, но я не знаю, как это сделать

Мой ящик выглядит как:

Пример того, что я ищу (я хочу добавить заголовки по-современному):

Часть моего кода:

\\The drawer page 
const DrawerNavigator = createDrawerNavigator({
  Accueil:{
    screen:Accueil1,
    navigationOptions:{
      title:"Accueil ",
      drawerIcon:({tintColor})=><Feather name="home" size={16}
      color='#ff9900'/>
    }
  },
{
    contentComponent :props => <BarDrawer {...props} />,
    contentOptions:{
    activeBackgroundColor:"#58ACFA",
    activeTintColor:"white",
  }
});
export default createAppContainer(DrawerNavigator);

\\The barDrawer that contains the image of @ 
export default BarDrawer = props =>(
<ScrollView>
<Block style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
  <Block style={styles.header}>
    <Image style={styles.logo} source={require('./netOne.jpg')} /> 
    <Block right style={styles.headerIcon}>
      <FontAwesome5 name="bars" size={15} color={'black'} />
    </Block>
  </Block>
</Block>

<View Style={styles.contain}>
<DrawerNavigatorItems {...props} />
</View>
  </ScrollView>
);

Answer 1

Этого можно добиться с помощью DrawerContentScrollView и DrawerItem

<DrawerContentScrollView {...props}>
       <View style={{height:150, backgroundColor:COLOR.pink}}>
          <Avatar.Image size={24} source={require('../assets/avatar.png')} />
          <Text>HeaderTitle</Title>
       </View> 
       <Drawer.Section>
            <DrawerItem
        icon={({ color, size }) => (
          <MaterialCommunityIcons
            name="account-outline"
            color={color}
            size={size}
          />
        )}
        label="Profile"
        onPress={() => {}}
      />
     <DrawerItem
        icon={({ color, size }) => (
          <MaterialCommunityIcons
            name="account-outline"
            color={color}
            size={size}
          />
        )}
        label="Profile"
        onPress={() => {}}
      />
    </Drawer.Section> 
     <Drawer.Section>
            <DrawerItem
        icon={({ color, size }) => (
          <MaterialCommunityIcons
            name="account-outline"
            color={color}
            size={size}
          />
        )}
        label="Profile"
        onPress={() => {}}
      />
     <DrawerItem
        icon={({ color, size }) => (
          <MaterialCommunityIcons
            name="account-outline"
            color={color}
            size={size}
          />
        )}
        label="Profile"
        onPress={() => {}}
      />
    </Drawer.Section>   

</DrawerContentScrollView >

Drawer.Session создает отдельные сеансы, которые могут иметь разные стили. Используйте ссылку ниже, где есть полная реализация

https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper