React Native Elements を学ぶ (1)
最近 React Native を触っているのですが、そのライブラリの1つ React Native Elements について今回は書いて行こうと思います。 React Native ElementsのGithubはこちら。
今回のコードはGithubで上げていますのでご参照ください。
React Native Elements のコンポーネントはたくさんあります。本記事では List、ListItem、Icon、SocialIcon、Slider を扱っています。これらを使用して iPhone の設定画面を真似した画面を作成します。出来上がりは以下の感じです。
環境
- MacOS
- ReactNative(ver0.47.0)
準備
プロジェクトの初期化
まずはプロジェクトを初期作成します。バージョンを 0.47.0 を指定しています。
$ react-native init --version="0.47.0" LearningElements
ライブラリのインストール
React Native Elements と、今回画面遷移のライブラリは React Navigation を使用しますのでそちらをインストールします。
$ yarn add react-native-elements react-navigation
また、React Native Elements のアイコンは React Native Vector Icons を使用していますのでこちらもインストールし、設定を行います。
$ yarn add react-native-vector-icons $ yarn add rnpm --dev $ yarn rnpm link
これで準備完了です。今回のフォルダ構成は以下の通りです。
LearningElements
├ index.ios.js
└ app
├ index.js
├ route
│ └ router.js
└ components
└ LearningReactNativeElements
├ index.js
├ route
│ └ router.js
├ DisplayMenu
│ ├ index.js
│ └ styles.js
├ LightnessItem
│ ├ index.js
│ └ styles.js
├ LightnessItem
│ ├ index.js
│ └ confg
│ └ menuData.js
├ NoticeMenu
│ └ index.js
└ SearchInput
├ index.js
└ styles.js
リストの使い方
リストとアイコンを使った画面を見てみます。見た目は以下の感じです。
ソースは以下の通りです。
gist.github.com
<List>
を使用するとリストのテーブルが作成されます。リストの各項目は<ListItem>
を使って作成します。
<ListItem>
に設定するプロパティでリスト項目の表示をカスタマイズします。title、subtitle は見た通りで、リスト項目に表示する文字列を設定します。
leftIcon はリスト左部に表示するアイコンの設定です。設定できるアイコンは React Native Vector Icon のアイコンです。アイコンの一覧はこちら。name には Vector Icon のアイコン名を、type にはアイコンの種類を設定します。ただし、アイコンの種類は Vector Icon の値ではなく、React Native Elements 用の値を指定します。対応する値は以下の通り。
Vector Icon のアイコン種類 | React Native Elements での指定値 |
---|---|
Entypo | entypo |
EvilIcons | evilicon |
FontAwesome | font-awesome |
Foundation | foundation |
Ionicons | ionicon |
MaterialCommunityIcons | material-community |
MaterialIcons | デフォルト |
SimpleLineIcons | simple-line-icon |
Octicons | octicon |
Zocial | zocial |
component を使用すると、自前で作成したコンポーネントをリスト項目に設定することができます。指定したコンポーネントにプロパティを渡したい場合は、<ListItem>
のプロパティに設定すれば、そのまま自前のコンポーネントに渡すことができます。ただし、<ListItem>
に指定できるプロパティ名に該当しない名前でないといけません。
<List>
<ListItem>
の簡単な説明は以上です。設定できるプロパティはたくさんありますので、より詳細設定は公式の説明をご参照ください。
<SocialIcon>
はソーシャルメディアのアイコンを作成することができます。type に facebook、twitter 等の名前を設定するだけです。アイコンだけでなくボタンの作成もできるので、使い勝手がとてもいいです。公式の説明
続きは次回へ。