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等，您可以

因此最终代码为

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

您可以visit here更多信息

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

1 个答案: