react-native - React Navigation (V2)：如何在 Drawer Navigator 中设置 Stack Navigator 的 Icon 和 label？

Question

我正在尝试在 DrawerNavigator 中自定义 StackNavigator。

这是我的代码：

const HomeStack = createStackNavigator(
  {
    HomeScreen,
    HomeDetailScreen,
    InteriorScreen,
    InteriorDetailScreen
  },
  {
    initialRouteName: "HomeScreen",
    navigationOptions: {
      headerTitleStyle: {
        color: headerColor
      },
      headerBackTitleStyle: {
        color: headerColor
      },
      headerTintColor: headerColor
    }
  }

const MainStack = createStackNavigator(
  {
    HomeStack,
    ChooseLocationScreen,
    FilterHomesScreen
  },
  {
    initialRouteName: "HomeStack",
    mode: "modal",
    navigationOptions: ({ navigation }) => {
      const options = {
        headerTitleStyle: {
          color: headerColor
        },
        headerBackTitleStyle: {
          color: headerColor
        },
        headerTintColor: headerColor,
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20, height: 20, tintColor: tintColor }}
          />
        )
      };
      if (navigation.state.routeName === "HomeStack") options["header"] = null;
      return options;
    }
  }
);

const MainDrawer = createDrawerNavigator(
  { MainStack },
  {
    initialRouteName: "MainStack",
    drawerBackgroundColor: backgroundColor,
    contentOptions: {
      inactiveTintColor: headerColor,
      activeTintColor: activeTintColor
    }
  }
);

我的问题是，在 DrawerNavigator 中，该项目仍然只是说“MainStack”。但我希望它说“Home”（这是 的值SCREEN_TEXT_HOME_HEADER），并且我希望它有“home.png”图标。如您所见，我尝试根据文档更改导航选项，但不知何故不起作用。如何获得正确的图标和标签？

标签： react-nativenavigation-drawerreact-navigationdrawer

Answer 1

找到了解决方案。在愚蠢的尝试和错误之后，这是我如何使它工作的：

  {
    Main: {
      screen: MainStack,
      navigationOptions: {
        drawerLabel: SCREEN_TEXT_HOME_HEADER,
        drawerIcon: ({ tintColor }) => (
          <Image
            source={require("../assets/icons/home.png")}
            resizeMode="contain"
            style={{ width: 20, height: 20, tintColor: tintColor }}
          />
        )
      }
    }
  }