reactjs - 如何使用 react native 在我的抽屉中添加标题？

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

标签： reactjsreact-native

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 创建单独的 Sessions 可以有不同的样式。在有完整实现的地方使用下面的链接

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