React-навигация с реактивным родным: DrawerIcon не отображается, если часть компонента

Question

Я пытаюсь использовать createDrawerNavigator с DrawerIcon.Однако DrawerIcon отображается только в том случае, если установлено напрямую с помощью функции createDrawerNavigator.Значки не отображаются, если они установлены в компоненте экрана.

Это работает:

const Drawer = createDrawerNavigator(
  {
    General: { screen: General },
    Business: { screen: Business },
    Entertainment: {
      screen: Entertainment,
      navigationOptions: {
        drawerIcon: <Icon name="home" style={{ fontSize: 24 }} />
      }
    },
    Sports: { screen: Sports }
  },
  {
    contentComponent: CustomDrawerComponent
  }
); 

Но если я добавлю навигационные опции на сам экран, на экране развлечений он не будет работать:

class EntertainmentArticleList extends React.Component {
  static navigationOptions = function(props) {
    return {
      // header: null
      title: "Entertainment",
      headerStyle: {
        backgroundColor: "white"
      },
      headerTitleStyle: { textAlign: "center", alignSelf: "center", flex: 1 },
      headerLeft: (
        <Icon
          name="menu"
          onPress={() => props.navigation.openDrawer()}
          style={{
            textAlign: "center",
            alignSelf: "center",
            fontSize: 24,
            marginLeft: 10
          }}
        />
      ),
      headerRight: <View />,
      drawerIcon: <Icon name="home" style={{ fontSize: 24 }} />
    };
  };
  render() {
...

Если я это сделаю, в поле «Мой ящик» не будет отображен значок в виде ящика.Кто-нибудь знает, как решить эту проблему?

Answer 1

Поскольку вы определяете свойства заголовка в navigationOptions, я предполагаю, что EntertainmentArticleList также находится в stackNavigator.navigationOptions применяется только к его первому родителю.

Не зная остальной части вашего кода, трудно дать какие-либо хорошие ответы, но я предлагаю вам прочитать этот раздел документации