React Navigation（V2）：如何在Drawer Navigator中设置图标和堆栈导航器的标签？

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”图标。如您所见，我尝试根据docs更改导航选项，但是它不起作用。如何获得正确的图标和标签？

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