TabBarIOS UI自定义

Question

所以我希望稍微自定义TabBarIOS ui。现在，TabBar有一个图标字段和一个名称字段：  iconName = “IOS针”  标题= “地图”

将这些结果用于此类结果（文本上方的图标）：

但是我试图得到一些看起来像这样的东西（文本旁边的图标p.s抱歉这个糟糕的图像）

有谁知道怎么做？下面是我当前的TabBarIOS代码。

谢谢！

renderScene(route, navigator) {
    return (
      <TabBarIOS
        translucent={false}
        unselectedTintColor="white"
        tintColor="#f9c827"
        barTintColor="#2c2c2c">

        <Icon2.TabBarItemIOS
          iconName="ios-pin"
          title="Map"
          selectedIconName="ios-pin"
          selected={this.state.selectedTab === 'MapTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'MapTab',
            });
          }}>
          {this.renderMap(route, navigator)}
        </Icon2.TabBarItemIOS>

        <Icon2.TabBarItemIOS
          iconName="ios-list-box-outline"
          title="List"
          selectedIconName="ios-list-box-outline"
          selected={this.state.selectedTab === 'ScrollTab'}
          onPress={() => {
            this.setState({
              selectedTab: 'ScrollTab',
              toolbar: YELLOW,
              navigationBar: NavigationBarYellow,
            });
          }}>
          {this.renderScrollView(route, 'ScrollTab')}
        </Icon2.TabBarItemIOS>


      </TabBarIOS>
    );
  }

Answer 1

最简单的方法是使用带有文本的图像，另一种是创建容器视图控制器并使用UIView而不是UITabbar。 该视图应该有两个带有图标和文本的按钮。