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

但是，如果我将NavigationOptions放在屏幕本身中，在娱乐屏幕中，则不起作用：

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仅适用于它的第一个父项。

在不知道其余代码的情况下，很难给出任何好的答案，但是我建议您阅读this section of the documentation

使用react-native的React-navigation：如果组件的一部分不呈现DrawerIcon

1 个答案: