react-native – 如何在React Native中设置图标样式

2023年8月14日 232次阅读

我在使用
react-native-icons并且似乎无法添加样式.添加样式或导致样式应用于栏上方的元素而不是TabBar内部.

例如,

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

这就是我所拥有的,风格错过了我的目标并设计了我的图标上方的项目：

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

《react-native – 如何在React Native中设置图标样式》

我应该在TabBarItem图标上实现我想要的样式？

最佳答案 您应该为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道具.

这是截图：

《react-native – 如何在React Native中设置图标样式》

点赞