将自定义图标添加到抽屉导航

Question

我正在尝试将自定义图标添加到我的 CustomDrawerComponent，但没有任何反应...

App.js：

const navigationOptions = {
  headerTintColor: colors.white,
};

const drawerNavigationOption = ({ navigation }) => ({
  ...navigationOptions,
  headerLeft: (
    <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <View>
        <Icon name="menu" size={24} color={colors.white} />
      </View>
    </TouchableOpacity>
  ),
});

const MapsStackNavigator = createStackNavigator({
  MapsNavigator: {
    screen: MapsScreen,
    navigationOptions: drawerNavigationOption,
  },
});

const AppDrawerNavigator = createDrawerNavigator(
  {
    Plans: MapsStackNavigator,
  },
  {
    contentComponent: CustomDrawerMenu,
    contentOptions: {
      inactiveTintColor: colors.doveGrey,
      activeTintColor: colors.doveGrey,
    },
  }
);

我的 CustomDrawerMenu.js ：

export default class CustomDrawerMenu extends Component {
  render() {
    return (
      <ScrollView
        contentContainerStyle={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
          {...}
          <DrawerItems {...this.props} />
        </SafeAreaView>
        {...}
      </ScrollView>
    );
  }
}

我的地图屏幕：

export default class MapsScreen extends React.Component {
  static navigationOptions = {
    drawerIcon: (
      <Image
        style={{ width: 24, height: 24 }}
        source={require("../../assets/icons/plan.png")}
      />
    ),
    title: "Plans",
  };

  render() {
    return (
      <Text>My map screen</Text>
    );
  }
}

但绝对没有发生任何事情...我尝试将drawerIcon 添加到我的App.js > const navigationOptions，但也没有发生任何事情。

我真的不知道在哪里放置抽屉图标，因为我在文档上搜索，在一些 YouTube 视频上搜索，当我复制相同的内容时，它不起作用。

谢谢。

Answer 1

在新版react-navigation(5.x)中

你必须这样做：

1-

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';

2-您必须使用Drawer.Navigator，而不是使用createDrawerNavigator，如下所示：

<NavigationContainer>
    <Drawer.Navigator
        initialRouteName="Products">

        <Drawer.Screen name="Products" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
            drawerIcon: config => <Icon
                size={23}
                name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
        }} />

        <Drawer.Screen name="Orders" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
            drawerIcon: config => <Icon
                size={23}
                name={Platform.OS === 'android' ? 'md-create' : 'ios-create'}></Icon>
        }} />

    </Drawer.Navigator>
</NavigationContainer>

Answer 2

我终于自己找到了答案，你不能在子屏幕的navigationOptions中添加drawerIcon。你必须这样做：

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeStackNavigator,
      navigationOptions: {
        drawerIcon: (
          <Image
            style={{ width: 24, height: 24 }}
            source={require("./assets/icons/plan.png")}
          />
        ),
      },
    },

然后在你的 HomeStack 中：

const HomeStackNavigator = createStackNavigator({
  HomeNavigator: {
    screen: HomeScreen,
    navigationOptions: drawerNavigationOption,
  },
});

希望它能为某人服务！

Answer 3

 <Stack.Screen name="Feed" component={Feed} options={{ title: 'Feed',
            drawerIcon: ({ focused, size }) => (
                <Image
                  source={require('../../../assets/icons/icon-email.png')}
                  style={[{ height: 20, width: 20 }]}
                /> )       
            }} />

Answer 4

const AppDrawerNavigator = createDrawerNavigator(
 {
     Home: {
       screen: HomeStackNavigator,
       navigationOptions: {
         drawerIcon: (
          <View>
           <Image
             style={{ width: 24, height: 24 }}
             source={require("./assets/icons/plan.png")}
           />
          </View>
         ),
       },
     },

添加之前，您将获得原始图像样式

Answer 5

希望这可以节省一些时间..

  import { NavigationContainer } from "@react-navigation/native";
   <NavigationContainer>
      <Drawer /> //import from your folder/file
    </NavigationContainer>

抽屉文件

   import { createDrawerNavigator } from "@react-navigation/drawer";
   import DrawerContain from "./DrawerContain";
   import StackNavigatore from "./stackNavigatore";
    import ProductHome from "../product/ProductHome";
   import Contact from "./ContactUs";
   import About from "./About";
      import HomeOrder from "./orderStack";
   function DrawerNavigator() {
   return (
   <Drawer.Navigator
    drawerContent={(props) => <DrawerContain {...props} />}
    drawerContentOptions={
    {
      // activeTintColor: "#e91e63",
      // itemStyle: { marginVertical: 5 },
    }
  }
>
  <Drawer.Screen name="Home" component={StackNavigatore} />
  <Drawer.Screen
    name="Order"
    component={HomeOrder}
  />
  <Drawer.Screen name="Contact Us" component={Contact} />
  <Drawer.Screen name="About Us" component={About} show={false} />
</Drawer.Navigator>
  );
}

  export default DrawerNavigator;

抽屉容器文件

  import {
   DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
 } from "@react-navigation/drawer";
  import { View, StyleSheet } from "react-native";
  import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { Drawer, Text } from "react-native-paper";

    function DrawerContain({ ...props }) {
    //   const navigation = useNavigation();
    const image = require("../../assets/img/rupee.png");
   return (
<>
    <Drawer.Section>
      <DrawerItem
        icon={({ color, size }) => (
          <Ionicons name="home-outline" color={color} size={size} /> <<--- with 
        vectore icon
        )}
        label="Sell prodcuts to customer"
        // onPress={() => props.navigation.navigate('route to screen')}
      />
      <Drawer.Item
        icon={image}   <<---- from local storage
        label="Orders"
        onPress={() => props.navigation.navigate("Order")}
      />
</> 
  )
 }