ios - TabBarIOS UI定制

Question

所以我希望稍微自定义一下 TabBarIOS ui。现在 TabBar 有一个图标字段和一个名称字段: 图标名称=“ios-pin” title=" map "

在类似这样的情况下使用这些结果(文本上方有图标):

但是我正在尝试获得看起来像这样的东西(文本旁边有图标 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

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