Как добавить иконки в ящик навигации

Question

Я знаю, как добавить иконки в пользовательскую панель навигации. Интересно, есть ли способ добавить иконки непосредственно в </Drawer.Navigator> или <Drawer.Screen/>?

Например, это мой код:

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
  <Drawer.Navigator
  initialRouteName='Main Page'
  >

<Drawer.Screen  name='Main Page' component={MainFunc} />


</Drawer.Navigator>

</NavigationContainer>
)

Answer 1

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

, например,

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
      icon={({ focused, color, size }) => <Icon color={color} size={size} name={focused ? 'heart' : 'heart-outline'} /> )}
      label="Help"
       onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

<DrawerItem> имеет различные свойства, такие как метка, значок , onPress et c вы можете

, поэтому окончательный код будет

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
      <Drawer.Navigator
      initialRouteName='Main Page'
      drawerContent={props => CustomDrawerContent(props)}
      >
        <Drawer.Screen  name='Main Page' component={MainFunc} />
    </Drawer.Navigator>
</NavigationContainer>
)



function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
      icon={({ focused, color, size }) => <Icon color={color} size={size} name={focused ? 'heart' : 'heart-outline'} /> )}
      label="Help"
       onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

вы можете посетить здесь подробнее