react-native - 将图标添加到抽屉 react-navigation v5

Question

我正在尝试向我的 react-navigation 抽屉中的每个屏幕添加一个图标，但该图标没有出现。

这是我的代码:

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
        activeTintColor: 'white',
        inactiveTintColor: 'white',
        itemStyle: { alignItems:'flex-end' },
       }}>
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />

      </Drawer.Navigator>

  );
}


export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerTitleAlign:"center",
            headerRight: ({}) => <HeaderRight />,
            headerLeft: ({}) => <Search />
          }}
          component={Drawer}
          name="Drawer"
        />
        <Stack.Screen name="Product" component={Product} options={{title:"product"}} />
        {/*
         * Rest Screens
         */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在文档中添加图标仅在 DrawerItem 中提到:

https://reactnavigation.org/docs/en/drawer-navigator.html

Answer 1

您只需在选项中添加 drawerIcon

<Drawer.Navigator>
    <Drawer.Screen name="Home" component={Home}
        options={{
           title: 'Home',
           drawerIcon: ({focused, size}) => (
              <Ionicons
                 name="md-home"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}
   />
</Drawer.Navigator>

你也可以像这样直接传递颜色

...
drawerIcon: ({color, size}) => (
            <Ionicons
               name="md-home" size={size} color={color}
            />
          ),
...

在这里，我使用 Ionicons 作为图标，您可以使用自己的图标组件或从“react-native-vector-icons/Ionicons”导入 Ionicons。