ExpoではじめるReactNative
「Expo」・・・簡単に扱えるように抽象化されたツール
☆ReactNativeでできること
ReactNativeがJavaScriptに対して提供している機能は、大きく分けて
コンポーネントとモジュールに分類される
＜コンポーネント＞
・View レイアウトの基本単位
・Text テキストを表示・装飾する
・Activitylndicator 処理待ちを表すインジケーター
・FlatList 配列データを省メモリで表示
・ScrollView 内側のコンテンツが画面をはみ出したらスクロールされる
・RefreshControl ScrollViewに「引っ張って更新」を付与する
・TouchableOpacity あらゆるビューにタップイベントとフィードバックを持たせる
＜モジュール＞
・Alert 簡易なダイアログを表示する
・Dimensions アプリのウィンドウやデバイスの画面サイズを取得する
・Keyboard キーボードの表示・非表示を検知する
・Animated ビューをアニメーションさせる
・StyleSheet コンポーネントに適用するスタイルをまとめて管理する
・Geolocation 現在地の経緯度情報を取得する
・Fetch インターネットと通信を行う
・Console デバッグログを表示する
・Require NPMモジュールや別のファイルとして定義されたCommonJSモジュールを取り込む
□サードパーティーツールを取り込むことで豊富な機能が使える
NPMを使ってサードパーティーのライブラリを取り込むことができます。
よく使うライブラリ
・react-native-maps GoogleマップやiOSマップを表示・操作する
・react-native-camera 写真の撮影やバーコードのスキャンを行う
・react-narive-svg SVGと互換性のあるAPIでベクターイメージを描画する
□expoでビルド環境を抽象化する
「できればJavaScript文化圏でシングルページアプリケーションを作るときのような方法論だけでモバイルアプリを作りたい」→そんな希望を叶えるために
できる限りReactNativeの面倒な部分を抽象化して、頻出のReactNative向けのライブラリを設定済みのSDKを整備して、コマンドラインツールを使いやすくまとめたものが、Expoというツール群
＜Expoが提供する便利なコンポーネントやモジュール＞
・MapView react-native-mapsを取り込んだもの
・Camera react-native-cameraを取り込んだもの
・BarCodeScanner ANコードやQRコードなど、さまざまなバーコードを認識できるカメラプレビューのコーポーネント
・Permissions カメラやGPSを使う前にユーザーに使用許可を求めるダイアログを簡易に実装するモジュール
・Audio 音声の再生や録音を行うモジュール
☆Expoを使った環境開発の構築
①インストール
$ npm install -g expo-cli
※インストールする際の名前は expo-cli ですが、コマンドラインで扱う場合のコメンド名は expo になるので注意
②プロジェクトの作成
$ expo init my-first-react-native-app
③blank tabs のどちらにするか質問される
blankを選択すると、とてもシンプルな構成でプロジェクトの初期化が行われる
tabsを選択すると、タブで画面の切り替えができるように画面推移ライブラリが導入済みの、少し複雑で実用的なプロジェクトとして初期化されます。
初回のnpm install が実行される
しばらく待つと、プロジェクトの作成が完了
＜各ファイル・フォルダの役割＞
・assets/ アプリアイコンやスプラッシュ画像等のリソースを配置するフォルダ
・.watchmanconfig デバッグ中の監視にwatchmanコマンドを利用する場合の設定ファイル
・App.js Reactアプリケーションとしてのエントリーポイント
・app.json アプリの設定を記述するファイル
・babel.config.js Babelの設定ファイル
参考：https://codezine.jp/article/detail/11384?p=3
