TabBarIOS UI自定義

所以我正在尋找自定義TabBarIOS ui一點。眼下的TabBar都有一個圖標字段和名稱字段： iconName =「IOS針」標題=「地圖」TabBarIOS UI自定義

在像這樣利用這些結果（與上面的文字圖標）：

但是我試圖得到的東西，看起來像這樣（用圖標旁邊的文本PS遺憾的蹩腳的圖像）

有沒有人有任何想法如何做到這一點？以下是我目前的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> 
    ); 
    }

來源

2016-11-03 wdlax11

最簡單的方法是使用圖像文本，另一種是創建容器視圖 - 控制並使用的UIView而不是UITabbar。該視圖應該有兩個帶有需要的圖標和文本的按鈕。

來源

2016-11-03 22:47:18

我覺得最簡單的方法是使用帶有文本的圖像，你是否知道任何免費的反應原生圖標集？我目前正在使用 - react-native-vector-icons – wdlax11

TabBarIOS UI自定義

回答

相關問題