Добавить пользовательский значок в ящик навигации

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

My 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, но ничего не произошло.

На самом деле я не знаю, где разместить в папке Iconm, потому что я ищу в документе, в некоторых видео на YouTube, и когда я воспроизводил его, он не работает.

Спасибо.

Answer 1

Я наконец-то нашел ответ сам, вы не можете добавить 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,
  },
});

Надеюсь, это кому-нибудь пригодится!