如何在React Native中设置<tabbaritem>图标的样式

Question

我在我的react-native-icons中使用了，我似乎无法为其添加样式。添加样式或将结果应用于栏上方的元素而不是TabBar中的元素。

例如，

1. 我想在图标文字的正下方添加5px。
2. 当图标处于活动状态
时，在图标周围添加不​​透明的backgroundColor
3. 更改文字颜色

这里有我所拥有的，风格错过了我的目标，并在我的图标上方设置了样式：

<TabBarIOS selectedTab={this.state.selectedTab}
             style={{backgroundColor: 'red', padding: 30}}>
    <Icon.TabBarItem
      style={{backgroundColor: 'blue', padding: 20}}
      title="Icon Text"
      selected={this.state.selectedTab === 'myTab'}
      iconName="navicon"
      iconSize={20}
      selectedIconName="navicon">
    </Icon.TabBarItem>

MSDN

我应该定位什么才能在TabBarItem图标上实现我想要的样式？

Answer 1

您应该为TabBarIOS指定样式。例如：

<TabBarIOS
        tintColor="yellow"
        barTintColor="red">

        <Icon.TabBarItem
          title="Home"
          iconName="ios-home-outline"
          selectedIconName="ios-home"
          selected={this.state.selectedTab === 'home'}
          onPress={() => {
            this.setState({
              selectedTab: 'home',
            });
          }}
          >
          <YourComponent />
        </Icon.TabBarItem>
</TabBarIOS>  

检查tintColor和barTintColor道具。

这里是截图：

Answer 2

您可以按照react-native-icons git repository

中的示例进行操作

var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
<TabBarItemIOS
      name="home"
      iconName={'ion|ios-home-outline'}
      selectedIconName={'ion|ios-home'}
      title={''}
      iconSize={32}
      style = {styles.icon} /* Add styles here*/
      accessibilityLabel="Home Tab"
      selected={this.state.selectedTab === 'home'}
      onPress={() => {
        this.setState({
          selectedTab: 'home',
        });
      }}>

Answer 3

我试过这样的事情 -

  <TabBarIOS selectedTab={this.state.selectedTab}
  barTintColor='#dcdcdc'
  tintColor='#E41B17'>
    <TabBarIOS.Item
      title="Summary"
      selected={this.state.selectedTab === 'summary'}//here is the part which keepit as selected and you can apply property watever you want
      icon={{uri:base64Icon, scale: 2}}
      onPress={() => {
          this.setState({
              selectedTab: 'summary',
          });
      }}>

同样适用于另一个标签

    <TabBarIOS.Item
    title="details"
      selected={this.state.selectedTab === 'detail'}
      icon={{uri:base64Icon1, scale: 2}}
      onPress={() => {
              this.setState({
                selectedTab: 'detail',
            });
      }}>

希望这可能会有所帮助