如何在React Native中設計<TabBarItem>圖標

我正在使用react-native-icons，我似乎無法爲其添加樣式。將樣式添加到或導致樣式應用於條上方的元素，而不是在TabBar內。如何在React Native中設計<TabBarItem>圖標

例如，

我想添加圖標文本下面5px的權利。
添加一個不透明的backgroundColor該圖標時，它的活躍
改變文字顏色

這裏是我有，樣式已經錯過了我的目標和風格的我上面的圖標的項目：

<TabBarIOS selectedTab={this.state.selectedTab} 
      style={{backgroundColor: 'red', padding: 30}}> 
    <Icon.TabBarItem 
     style={{backgroundColor: 'blue', padding: 20}} 
     title="Icon Text" 
     selected={this.state.selectedTab === 'myTab'} 
     iconName="navicon" 
     iconSize={20} 
     selectedIconName="navicon"> 
    </Icon.TabBarItem>

我應該如何實現我想要的TabBarItem圖標上的樣式？

來源

2015-10-18 Henry Zhu

您可以按照

var { TabBarIOS, } = require('react-native-icons'); 
var TabBarItemIOS = TabBarIOS.Item; 
<TabBarItemIOS 
     name="home" 
     iconName={'ion|ios-home-outline'} 
     selectedIconName={'ion|ios-home'} 
     title={''} 
     iconSize={32} 
     style = {styles.icon} /* Add styles here*/ 
     accessibilityLabel="Home Tab" 
     selected={this.state.selectedTab === 'home'} 
     onPress={() => { 
     this.setState({ 
      selectedTab: 'home', 
     }); 
     }}>

來源

2015-10-18 09:27:05

我的樣式確實添加到TabBarIOS和TabBarItem，就像這個例子。 –

除了它們是inline –

我不認爲這種內聯風格會導致問題。請詳細瞭解所使用的組件。該示例使用TabBarIOS.Item（或）Icons.Item，在你的情況。它看起來像你使用Icons.TabBarItem。這對我來說似乎是最明顯的差異 –

應指定風格TabBarIOS反應中，本機的圖標git倉庫的例子。例如：

<TabBarIOS 
     tintColor="yellow" 
     barTintColor="red"> 

     <Icon.TabBarItem 
      title="Home" 
      iconName="ios-home-outline" 
      selectedIconName="ios-home" 
      selected={this.state.selectedTab === 'home'} 
      onPress={() => { 
      this.setState({ 
       selectedTab: 'home', 
      }); 
      }} 
      > 
      <YourComponent /> 
     </Icon.TabBarItem> 
</TabBarIOS>

查詢tintColor和barTintColor道具。

這裏是截圖：

來源

2015-10-18 21:45:37

我想是這樣這個 -

<TabBarIOS selectedTab={this.state.selectedTab} 
    barTintColor='#dcdcdc' 
    tintColor='#E41B17'> 
    <TabBarIOS.Item 
     title="Summary" 
     selected={this.state.selectedTab === 'summary'}//here is the part which keepit as selected and you can apply property watever you want 
     icon={{uri:base64Icon, scale: 2}} 
     onPress={() => { 
      this.setState({ 
       selectedTab: 'summary', 
      }); 
     }}>

同樣，對於另一個選項卡

<TabBarIOS.Item 
    title="details" 
     selected={this.state.selectedTab === 'detail'} 
     icon={{uri:base64Icon1, scale: 2}} 
     onPress={() => { 
       this.setState({ 
       selectedTab: 'detail', 
      }); 
     }}>

希望這可能有所幫助

來源

2016-06-09 08:19:15 Dlucidone

如何在React Native中設計<TabBarItem>圖標

回答

相關問題