时间戳

首页 > 解决方案 > 如何将图标添加到导航抽屉

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

问题描述

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

标签： reactjsreact-nativenavigation-drawerreact-navigation

解决方案

对于添加，自定义图标到项目，创建一个函数来显示抽屉项目列表

像这样

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

你可以在这里访问更多信息

推荐阅读