以下のように、公式の通りにアイコンを当てようとするとアイコンのURLが必要になります。
var SampleTab = React.createClass({ getInitialState: function(){ return( { //最初に開くタブの設定 selectedTab: 'TabName' } ); }, render: function() { return ( <TabBarIOS selectedTab={this.state.selectedTab}> <TabBarIOS.Item selected={this.state.selectedTab === 'TabName'} icon={{uri: 'https://hogehoge.com'}} ←ここ!! onPress={() => { this.setState( {selectedTab: 'TabName'} ); }} > <Optional Component /> //挿入したいコンポーネント </TabBarIOS.Item> </TabBarIOS> ); } });
ここでFontAwesome等のアイコンを当てたいというときは、react-native-vector-iconsというライブラリを用いてあげると良いみたいです。
解決の手順
react-native-vector-iconsの導入
以下のコマンドをたたくだけで終わり
$ npm install rnpm -g $ npm i -S react-native-vector-icons $ rnpm link react-native-vector-icons
コンポーネントの生成
公式の時とは、書き方が異なるので注意です。
//使いたいアイコンの取得 var Icon = require('react-native-vector-icons/Ionicons'); //タブ生成のコンポーネント var SampleTab = React.createClass({ getInitialState: function(){ return( { //最初に開くタブの設定 selectedTab: 'TabName' } ); }, render: function() { return ( <TabBarIOS selectedTab={this.state.selectedTab}> <Icon.TabBarItem title="SampleTab" iconName="設定したいフォント名-outline" // ex) ios-home-outline selectedIconName="設定したいフォント名" // ex) ios-home selected={ this.state.selectedTab === 'TabName' } onPress={() => { this.setState({ selectedTab: 'TabName' }); }} > <Optional Component /> //挿入したいコンポーネント </Icon.TabBarItem> </TabBarIOS> ); } });
ただIoniconsのときはうまくいったのですが、FontAwesomeの場合はうまく行かなかったので、上手くいった方教えてください。。。
参考
React NativeでiOSアプリケーションを開発してみた
React Native Iconとrnpm
Stackoverflow : How to style