时间戳

首页 > 解决方案 > 如何在 TabBar 中添加图标 (createMaterialTopTabNavigator) ReactNative

reactjs - 如何在 TabBar 中添加图标 (createMaterialTopTabNavigator) ReactNative

问题描述

嗨，我是 React Native 的新手，我正在使用 TabBar createMaterialTopTabNavigator ，现在我想在标签中本地添加图标 我的代码是

 const TabScreen = createMaterialTopTabNavigator(
 {
   Home: { screen: Home },
   Settings: { screen: Settings }
 });

我有两个类名称 Home 和 Settings 也是我的标签样式代码

{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}

标签： reactjsreact-native

解决方案

您必须在选项卡屏幕中添加带有 TabBarIcon 的导航选项，

 Home: {
      screen: Home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          //Your icon component for example => 
          <Icon name="home" size={30} color="#900" />
        )
      },
    },

并在 tabBarOptions 中添加 showIcon: true，

{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {

 showIcon: true,
  activeTintColor: '#FFFFFF',
  inactiveTintColor: '#F8F8F8',
  style: {
    backgroundColor: '#633689',
  },
  labelStyle: {
    textAlign: 'center',
  },
  indicatorStyle: {
    borderBottomColor: '#87B56A',
    borderBottomWidth: 2,
  },
},}

推荐阅读