Question

我试图在我的反应导航抽屉中的每个屏幕上添加一个图标，但是该图标没有出现。

这是我的代码：

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中传递options：

options={{
  title: 'Product',
  drawerIcon: ({ focused, size }) => (
    <Image
      source={require('./images/icons/plumbing-b.png')}
      style={[focused ? styles.drawerActive : styles.drawerInActive, { height: size, width: size }]}
    />
}}

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

Answer 2

您只需在选项中添加抽屉图标即可

<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>

在这里，我已使用爱奥顿图标，您可以使用自己的图标组件，也可以从“ react-native-vector-icons / Ionicons”导入爱奥顿。

Answer 3

您可以在 DrawerContent 组件中为 DrawerItem 添加图标。

在应用中：

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

      </Drawer.Navigator>

  );
}

在抽屉内容中：

                  <DrawerItem
                    label='News'
                    onPress={() => 
                      props.navigation.navigate('News')}                                           
                    icon={() =>
                      <Image
                        style={styles.icon}
                        source={require('./images/icons/plumbing-b.png')
                      />
                    }
                  />

Answer 4

我使用抽屉内容配置抽屉内容：步骤如下... 1.用屏幕创建一个抽屉函数DrawerStack（{route，navigation}）{ 返回（

  drawerContent={(props) => <DrawerContent {...props} />}

  drawerStyle={{
    backgroundColor: "green",
    alignItems: "center",

    paddingTop: 100
  }}
>
  {/* //it is must to define the screens here */}
  <Drawer.Screen name="Drawer1" component={Drawer1}
  />
  <Drawer.Screen name="Drawer2" component={Drawer2} />
</Drawer.Navigator>

） }

2。使用抽屉内容自定义抽屉内容：

function DrawerStack（{route，navigation}）{ 返回（

  drawerContent={(props) => <DrawerContent {...props} />}

  drawerStyle={{
    backgroundColor: "green",
    alignItems: "center",

    paddingTop: 100
  }}
>
  {/* //it is must to define the screens here */}
  <Drawer.Screen name="Drawer1" component={Drawer1}
  />
  <Drawer.Screen name="Drawer2" component={Drawer2} />
</Drawer.Navigator>

） }

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

4 个答案: