向抽屉导航添加自定义图标

问题描述 投票：0回答：6

我正在尝试将自定义图标添加到我的 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 视频上搜索，当我复制相同的内容时，它不起作用。

谢谢你。

react-native navigation-drawer react-navigation
6个回答
11
投票

在新版本中

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- 您必须使用 

createDrawerNavigator
而不是使用 
Drawer.Navigator
，如下所示：

<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>
10
投票

我终于自己找到了答案，你不能将

drawerIcon
添加到子屏幕的navigationOptions中。你必须这样做：

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

希望它对某人有用！

0
投票
 <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 }]}
                /> )       
            }} />
0
投票
const AppDrawerNavigator = createDrawerNavigator(
 {
     Home: {
       screen: HomeStackNavigator,
       navigationOptions: {
         drawerIcon: (
          <View>
           <Image
             style={{ width: 24, height: 24 }}
             source={require("./assets/icons/plan.png")}
           />
          </View>
         ),
       },
     },

添加后即可获得原始图像风格

0
投票

希望这能节省某人的时间..

  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")}
      />
</> 
  )
 }
0
投票

我遇到了同样的问题，但以上答案都不适合我。我确实找到了一个易于实施且效果出色的解决方案：

1。进口：

import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import HeaderLogo from "./components/header";
import Dashboard from "./components/dashboard";
import { StatusBar as CustomStatusBar } from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";

2。初始化：

const Drawer = createDrawerNavigator();

3.我的抽屉导航器：

function DrawerNavigator() {
  return (
    <>
      <CustomStatusBar
        animated={true}
        // Native to android
        backgroundColor="#B72E81"
        barStyle={"default"}
        showHideTransition={"slide"}
        hidden={false}
      />
      <Drawer.Navigator
        screenOptions={{ drawerActiveTintColor: "#000", fontWeight: "bold" }}
        initialRouteName="Home"
        options={{
          headerTitle: () => <HeaderLogo />,
        }}
      >
        <Drawer.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            headerTitle: () => <HeaderLogo />,
            headerStyle: {
              backgroundColor: "#FEF202",
            },
            headerTitleAlign: "center",
            drawerIcon: () => (
              <AntDesign name="dashboard" size={30} color="black" />
            ),
          }}
        />
      </Drawer.Navigator>
    </>
  );
}

4。结局：

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

注意：我正在研究react-native，但图标实现应该是相同的并且是最新的。在我的示例中，我没有海关，一切都按照文档进行。欢迎编辑，希望对大家有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.