如何将图标添加到导航抽屉

Question

我知道如何将图标添加到自定义抽屉导航中，我想知道是否有任何方法可以直接向</Drawer.Navigator>or添加图标<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 等，您可以

所以最终代码是

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

您可以访问这里了解更多信息