React native 反应导航（V2）：如何在抽屉导航器中设置堆栈导航器的图标和标签？

我正在尝试在抽屉导航器中自定义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
    }
  }
);

const HomeStack=createStackNavigator(
{
主屏幕，
HomeDetailScreen，
内部屏幕，
内部细节屏幕
},
{
initialRouteName：“主屏幕”，
导航选项：{
头饰样式：{
颜色：头彩
},
headerBackTitleStyle：{
颜色：头彩
},
headerColor:headerColor
}
}
const MainStack=createStackNavigator(
{
本垒打，
选择位置屏幕，
滤心筛
},
{
初始路线名称：“HomeStack”，
模式：“模态”，
导航选项：（{navigation}）=>{
常量选项={
头饰样式：{
颜色：头彩
},
headerBackTitleStyle：{
颜色：头彩
},
headerColor:headerColor，
抽屉标签：屏幕\文本\主页\标题，
抽屉图标：（{tintColor}）=>(
)
};
如果（navigation.state.routeName==“HomeStack”）选项[“header”]=null；
返回选项；
}
}
);
const main drawer=createDrawerNavigator(
{MainStack}，
{
initialRouteName:“主背包”，
抽屉背景色：背景色，
内容选项：{
InactiveIntColor:headerColor，
activeTintColor:activeTintColor
}
}
);

---

我的问题是，在DroperNavigator中，该项仍然只显示“MainStack”。但我希望它显示“Home”（这是

SCREEN\u TEXT\u Home\u HEADER

的值），并且我希望它显示“Home.png”图标。正如您所看到的，我试图更改导航选项，但不知何故无效。如何获得正确的图标和标签？

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

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

{
主要内容：{
屏幕：MainStack，
导航选项：{
抽屉标签：屏幕\文本\主页\标题，
抽屉图标：（{tintColor}）=>(
)
}
}
}

@suther

下面是我如何实现它的。我希望它更清晰。 注意：

drawerIcon

道具与

屏幕一起位于
createDrawerNavigator
函数的第一个参数中，但位于
导航选项中

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


从“React”导入React；
从“react native”导入{Platform}；
进口{
createStackNavigator，
CreateBoottomTabNavigator，
createAppContainer，
createDrawerNavigator
}从“反应导航”；
从“@expo/vector icons”导入{MaterialIcons}；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“../screens/CategoriesScreen”导入分类屏幕；
从“../screens/CategoryMalsScreen”导入CategoryMalsScreen；
从“../screens/MealDetailScreen”导入MealDetailScreen；
从“../screens/FavoriteScreen”导入FavoriteScreen；
从“../screens/FilterScreen”导入FilterScreen；
从“../constants/Colors”导入颜色；
const defaultStackNavOptions={
头型：{
backgroundColor:Platform.OS=='android'？Colors.primaryColor:'
},
headerTintColor:Platform.OS=='android'？'white'：Colors.primaryColor，
标题：“屏幕”
};
const MealsNavigator=createStackNavigator(
{
类别：{
屏幕：分类屏幕
},
类别：{
屏幕：CategoryMalsScreen
},
Mealdeail：Mealdeail屏幕
},
{
//initialRouteName:“类别”，
defaultNavigationOptions:defaultStackNavOptions
}
);
const FavNavigator=createStackNavigator(
{
收藏夹：收藏夹屏幕，
Mealdeail：Mealdeail屏幕
},
{
//initialRouteName:“类别”，
defaultNavigationOptions:defaultStackNavOptions
}
);
常量选项卡屏幕配置={
膳食：{
屏幕：MealsNavigator，
导航选项：{
tabBarIcon:tabInfo=>{
返回(
);
},
tabBarColor:Colors.primaryColor
}
},
收藏夹：{
屏幕：FavNavigator，
导航选项：{
tabBarIcon:tabInfo=>{
返回；
},
tabBarColor:Colors.accentColor
}
}
};
const MealsFavTabNavigator=
Platform.OS==='android'
？createMaterialBottomTabNavigator（tabScreenConfig{
activeTintColor:'白色'，
是的，
酒吧风格：{
背景颜色：Colors.primaryColor
}
})
：CreateBoottomTabNavigator（tabScreenConfig{
选项卡选项：{
activeTintColor:Colors.accentColor
}
});
const FiltersNavigator=createStackNavigator(
{
过滤器：过滤器屏幕
},
{
//导航选项：{
//抽屉标签：“过滤器！！！！”
// },
defaultNavigationOptions:defaultStackNavOptions
}
);
//这是抽屉
const main navigator=createDrawerNavigator(
{
米尔斯法夫斯：{
屏幕：MealsFavTabNavigator，
导航选项：{
抽屉标签：“膳食”，
抽屉图标：（{tintColor}）=>
}
},
过滤器：{
屏幕：FiltersNavigator，
导航选项：{
抽屉图标：（{tintColor}）=>
}
}
},
{
内容选项：{
activeTintColor:Colors.accentColor，
标签样式：{
fontFamily:“开放式无边框”
},
}
}
);
导出默认createAppContainer（MainNavigator）；

快乐编码：）
为抽屉添加一个选项。屏幕组件

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

选项={{
抽屉图标：（{color，size}）=>(
),
}}
@j-Hester你能把全部源代码都发送出去吗。您在哪里添加了这段代码？在新版本的react navigation（5.x）中，请执行以下操作：