TabBarIOS UI 自定义

Question

所以我希望稍微定制一下 TabBarIOS ui。现在 TabBar 有一个图标字段和一个名称字段： iconName="ios-pin" 标题="地图"

使用这些结果会产生类似这样的结果（带有文本上方的图标）：

但是我正在尝试获得看起来像这样的东西（在文本旁边带有图标 p.s sorry for the crappy image）

有人知道怎么做吗？下面是我当前的 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

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