トップ > React Native > React Native Elements を学ぶ (1)

React Native Elements を学ぶ (1)

React Native

最近 React Native を触っているのですが、そのライブラリの１つ React Native Elements について今回は書いて行こうと思います。 React Native ElementsのGithubはこちら。

今回のコードはGithubで上げていますのでご参照ください。

React Native Elements のコンポーネントはたくさんあります。本記事では List、ListItem、Icon、SocialIcon、Slider を扱っています。これらを使用して iPhone の設定画面を真似した画面を作成します。出来上がりは以下の感じです。

f:id:ashiris:20170917181310g:plain

環境

  • 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

リストの使い方

リストとアイコンを使った画面を見てみます。見た目は以下の感じです。
f:id:ashiris:20170917215337p:plain

ソースは以下の通りです。
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 等の名前を設定するだけです。アイコンだけでなくボタンの作成もできるので、使い勝手がとてもいいです。公式の説明

続きは次回へ。