react-native-vector-icons Tabbarにアイコンを当てる

nissy 75views 更新:2017年2月28日

以下のように、公式の通りにアイコンを当てようとするとアイコンの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 icons in React Native

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません