React Native Iconとrnpm - ついんてっく

どうも、兄です。前回、react nativeのroutingを記事にし、タブを実装したました。その際、タブボタンがテキストだったのでいい感じのアイコンに変えていきたいと思います。

twins-tech.hatenablog.com

強い味方、react-native-vector-icons

webでもネイティブでも、アイコンを使うケースは多いと思います。 webの場合、bootstrapを始めとしライブラリからすぐ使えるケースが多いですね。

react-nativeの場合はどうでしょうか？ starなど標準で用意されているアイコンもありますが、数が少なく実装には耐えれません。

そこで、強い味方が『react-native-vector-icons』です。

f:id:twins_tech:20160607093432p:plain

ドキュメントに記載通り、このIconsetの中から自由に組み合わせて使うことができます。

僕のオススメはIoniconsです。iOS、android両方のデザインが揃っているの使い勝手が良いです。

http://ionicframework.com/docs/v2/ionicons/ionicframework.com

react-native-vector-iconsをinstall

例のごとくnpmでinstallします。 npm i -S react-native-vector-icons

importしてBuildします。

import Icon from 'react-native-vector-icons/Ionicons';

class TabIcon extends React.Component {
  render(){
    return (
      <Icon name={"ios-albums-outline"} size={30} color="#900"></Icon>
    );
  }
}

しかしながらエラーになります。 f:id:twins_tech:20160607094510p:plain

実はreact-nativeの幾つかのライブラリにはxcodeまたはandroid studioで直接ライブラリを参照する必要があるライブラリがあります。 (サードパーティ、ハードウェア、push通知などがそうでしょうか？)

react-native-vector-iconsもfont-familyをxcode、android studioで登録する必要があります。

実装が捗るrnpm

「ゲッ。ネイティブ側触らないといけないの面倒だ。。。」と思いませんでしたか？

僕は逃げ出したい位思いました。笑

手動か〜。やだなーやだなー。

xcodeはCocoaPod使ってるから手動で設定などほとんどないし、
androidに至ってはそもそも設定方法わからんぜよ。。。

と思ってる所、素晴らしいpackageに出逢いました。『rnpm』です。

github.com

react nativeのpackage managerで、簡単にいうとネイティブ側で必要な設定をreact-nativeのpackage名から判別して自動で設定してくれるpackage managerです。

iOSでいうと、ライブラリの追加、 androidでいうと、gradleの追加とMainActivityへimport、getPackagesへの追加などをしてくれます。これにより、ほとんどのパッケージでネイティブを触ることなく設定が完了することができます。

ドキュメントによるとCocoa Podとも仲良くなれるそうなのですが、そこはまだできていません。何にせよ必須packageの一つでしょう。

rnpm link

まずはグローバルにnpm install npm install rnpm -g

使いかたは簡単で、 npm i -S package名したpackageを、 rnpm link package名で関連づけすることができます。

$ rnpm link react-native-vector-icons

rnpm-link info Linking react-native-vector-icons android dependency 
rnpm-link info Android module react-native-vector-icons has been successfully linked 
rnpm-link info Linking react-native-vector-icons ios dependency 
rnpm-link info iOS module react-native-vector-icons has been successfully linked 
rnpm-link info Linking assets to ios project 
rnpm-link WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-link info Linking assets to android project 
rnpm-link info Assets has been successfully linked to your project

これで、プロジェクトを確認すると、このように設定されています。

手動で行うと思うとミスしまくって、１日無駄にするんだろうなぁ。と思うとゾッとします。

[iOS] f:id:twins_tech:20160607101134p:plain f:id:twins_tech:20160607101118p:plain