如何在 createbottomtabnavigrtor 中将自定义样式添加到活动选项卡答案

【问题标题】：how to add custom style to active tab in createbottomtabnavigrtor如何在 createbottomtabnavigrtor 中将自定义样式添加到活动选项卡
【发布时间】：2019-12-13 09:11:55
【问题描述】：

大家好，希望你们没事，我正在使用 react-navigation 4 中的 createBottomTabNavigator 处理一个 react 本机项目，我需要通过添加一些大小和颜色的边框顶部来自定义活动选项卡这是我的代码我该怎么做？

const Navigation = createBottomTabNavigator({
 test1: test1,
 test2: test2,
 ProfileScreen: ProfileScreen,
},{
 initialRouteName: 'ProfileScreen',
 tabBarOptions: {
   activeTintColor: '#BFC932',
   inactiveTintColor: '#333',
 }
}
)

如何只为活动标签添加样式？和谢谢

【问题讨论】：

标签： react-native react-navigation react-native-navigation

【解决方案1】：

这就是我将图标更改为唯一活动标签的方法：

const TabNavigator = createBottomTabNavigator(
  {
    Home: AppStack,
    Notification: Notifications,
    Account: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      tabBarIcon: ({focused, tintColor}) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: colors.tealC,
      inactiveTintColor: 'gray',
    },
  },
);

我创建了bottomTabnavigator并调用了getTabBarIcon函数，

//这个函数在标签被选中时给出图标

const getTabBarIcon = (navigation, focused, tintColor) => {
  const {routeName} = navigation.state;
  if (routeName === 'Home') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/homeF.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/unstar.png')}
        />
      );
    }
  }

  if (routeName === 'Notification') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/whatsapp.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/bellNF.png')}
        />
      );
    }
  }

  if (routeName === 'Account') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/whatsapp.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/profileNF.png')}
        />
      );
    }
  }
};

所以这里基本上路由名称首先检查它是否是那个路由名称，如果它是那个，然后根据 if(focused) 我添加图标。希望您可以在选择活动选项卡时对样式执行相同的操作。

希望对您有所帮助。如有疑问，请随意。

【讨论】：