Question

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

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

我有两个班级，分别是“首页”和“设置”，我是用来设置标签样式的代码

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

Answer 1

您必须在“选项卡”屏幕中添加带有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,
  },
},}

如何在TabBar中添加图标（createMaterialTopTabNavigator）ReactNative

1 个答案: