使用本机反应导航:如果组件的一部分，则不呈现抽屉图标

Question

我正在尝试将createDrawerNavigator与DrawerIcon一起使用。但是，仅当直接使用 createDrawerNavigator 功能设置时，才会显示DrawerIcon。如果在屏幕组件中设置，则不会呈现图标。

这有效：

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

由于您在导航选项中定义标头属性，因此 EntertainmentArticleList 也在 stackNavigator 中。 导航选项仅适用于它的第一个父级。

如果不了解代码的其余部分，很难给出任何好的答案，但我建议您阅读文档的这一部分