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”图标。如您所见，我尝试更改导航选项according to the 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 }}
          />
        )
      }
    }
  }

Answer 2

@苏瑟

这是我的实现方式。我希望它更清楚。 注意：drawerIcon 属性与screen 一起在createDrawerNavigator 函数的第一个参数中，但在navigationOptions 属性中。

import React from 'react';
import { Platform } from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
  createDrawerNavigator
} from 'react-navigation';
import { MaterialIcons } from '@expo/vector-icons';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import FavoritesScreen from '../screens/FavoritesScreen';
import FiltersScreen from '../screens/FiltersScreen';
import Colors from '../constants/Colors';

const defaultStackNavOptions = {
  headerStyle: {
    backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
  },
  headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor,
  headerTitle: 'A Screen'
};

const MealsNavigator = createStackNavigator(
  {
    Categories: {
      screen: CategoriesScreen
    },
    CategoryMeals: {
      screen: CategoryMealsScreen
    },
    MealDetail: MealDetailScreen
  },
  {
    // initialRouteName: 'Categories',
    defaultNavigationOptions: defaultStackNavOptions
  }
);

const FavNavigator = createStackNavigator(
  {
    Favorites: FavoritesScreen,
    MealDetail: MealDetailScreen
  },
  {
    // initialRouteName: 'Categories',
    defaultNavigationOptions: defaultStackNavOptions
  }
);

const tabScreenConfig = {
  Meals: {
    screen: MealsNavigator,
    navigationOptions: {
      tabBarIcon: tabInfo => {
        return (
          <MaterialIcons name="restaurant" size={25} color={tabInfo.tintColor} />
        );
      },
      tabBarColor: Colors.primaryColor
    }
  },
  Favorites: {
    screen: FavNavigator,
    navigationOptions: {
      tabBarIcon: tabInfo => {
        return <MaterialIcons name="favorite" size={25} color={tabInfo.tintColor} />;
      },
      tabBarColor: Colors.accentColor
    }
  }
};

const MealsFavTabNavigator =
  Platform.OS === 'android'
    ? createMaterialBottomTabNavigator(tabScreenConfig, {
        activeTintColor: 'white',
        shifting: true,
        barStyle: {
          backgroundColor: Colors.primaryColor
        }
      })
    : createBottomTabNavigator(tabScreenConfig, {
        tabBarOptions: {
          activeTintColor: Colors.accentColor
        }
      });

const FiltersNavigator = createStackNavigator(
  {
    Filters: FiltersScreen
  },
  {
    // navigationOptions: {
    //   drawerLabel: 'Filters!!!!'
    // },
    defaultNavigationOptions: defaultStackNavOptions
  }
);

// HERE IS THE drawerIcon
const MainNavigator = createDrawerNavigator(
  {
    MealsFavs: {
      screen: MealsFavTabNavigator,
      navigationOptions: {
        drawerLabel: 'Meals',
        drawerIcon: ({ tintColor }) =>  <MaterialIcons name="restaurant" size={25} color={tintColor} />
      }
    },
    Filters: {
      screen: FiltersNavigator,
      navigationOptions: {
        drawerIcon: ({ tintColor }) =>  <MaterialIcons name="filter-list" size={25} color={tintColor} />
      }
    }
  },
  {
    contentOptions: {
      activeTintColor: Colors.accentColor,
      labelStyle: {
        fontFamily: 'open-sans-bold'
      },

    }
  }
);

export default createAppContainer(MainNavigator);

编码愉快:)

Answer 3

为抽屉添加一个选项。屏幕组件

      options={{
        drawerIcon: ({ color, size }) => (
          <AntDesign name="home" color={color} size={size} />
        ),
      }}