TabBarIOS.Itemにインポートされたアイコンを追加する

Question

FontAwesomeのアイコンを自分のReact-Native TabBarIOSに組み込もうとしていますが、どうしたらいいか分かりません。誰かがこれを行う方法を知っていますか？ここに私のTabBarIOS.Itemsの1の例である：

<TabBarIOS.Item 
     selected={this.state.selectedTab === 'searchTab'} 
     title={'Search Books'} 
     onPress={() => this.navigateToTab('searchTab')}> 
     <SearchView/> 
    </TabBarIOS.Item> 

Answer 1

あなたはこれを達成するためにreact-native-vector-iconsを使用することができます。

パッケージインストール：コンポーネントページのインポートでnpm install --save react-native-vector-icons

プラグインimport Icon from 'react-native-vector-icons/FontAwesome';

あなたTabbarIosコンポーネント：サードパーティ製のプラグインを使用しない場合

<TabBarIOS> 
     <Icon.TabBarItem 
     title="Search Books" 
     iconName="fa-search" 
     selectedIconName="fa-search" 
     > 
     <View style={styles.searchStyle}><Text>Search Books ...</Text></View> 
     </Icon.TabBarItem> 
</TabBarIOS> 

を、react-native TabBarIosました例。

まず、アイコン画像をbase64に変換する必要があります。これはonline toolは/

var base64Icon = 'data:image/png;base64,.........';

<TabBarIOS.Item 
     title="Blue Tab" 
     icon={{uri: base64Icon, scale: 3}} //here 
     selected={this.state.selectedTab === 'blueTab'} 
     onPress={() => { 
     this.setState({ 
      selectedTab: 'blueTab', 
     }); 
     }}> 
     {this._renderContent('#414A8C', 'Blue Tab')} 
    </TabBarIOS.Item>