TabBarIOS用户界面定制

Question

因此，我希望定制一些TabBarIOS ui。现在，TabBar有一个图标字段和一个名称字段: iconName="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

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