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

Question

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

应用程序.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但也没有发生任何事情。

我真的不知道把 drawerIconm 放在哪里，因为我搜索了文档、一些 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-而不是使用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>

Answer 2

我终于自己找到了答案，您无法添加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,
  },
});

希望它会为某人服务！