【React Native】まとめ
（参考）
■ 型
any ：「型チェックしない」ことを示す
void ：「他のどの方でもない」ことを示す
tuple ：組み合わせ
（例）
var tuple: [number, string] = [1, ‘a’]
■ interface
新しい型を作成したいとき
■ プロパティの末尾に、?
→指定が任意であることを指示するための書き方
■ 拡張子
.ts ファイル
TypeScriptファイルを示す
.tsx ファイル
TypeScriptファイル、かつ、JSX含む
■ Homebrew
brew —version
■ yarn（ヤーン）のインストール
brew install yarn
→ yarnは、npmと比較して高速に動作するパッケージマネージャ
■ watchman：ReactNative動作するための監視ツール
brew install watchman
watchman —version
■ CocoaPods：Swift・Objective-C のパッケージマネージャ
（ReactNavieは、iOSにおいてはネイティブコードをCocoaPodsで管理する。Rubyで書かれてるためgemコマンド）
sudo gem install cocoapods
pod —version
■ Metro Bundler：アプリを起動する際に、同時に起動され、サーバとして動作する
■ キャッシュクリアしたいとき（ディレクトリー名の変更 or ソースファイルの移動が反映されない場合）
npx react-natvie start —reset-cache
npx react-native start ：Metro Bundlerを起動するためのコマンド
—reset-cache ：キャッシュを消去するオプション
■ Viewコンポーネント
divにあたる。何にも表示しない。
「親」として使うことが多い。必要のないところで使うと、メモリが無駄
■ Textコンポーネント
Textのみの入れ子で、スタイルのカスケードが可能
※カスケード
CSS（Cascading Style Sheets）のCascadingとは
「階段状の滝のような」「連鎖的に伝わる」という意味
（参考）
http://www.htmq.com/csskihon/006.shtml
■ flexDirection：配置
column ：上から下へ配置 デフォルト値
row ：左から右へ配置
■ justifyContent：配置ルール（flexDirection方向）
flex-start ：始端側に詰める。デフォルト値
flex-end ：終端側に詰める
center ：中央寄せ
space-between：最初を始端、最後は終端、残りは等間隔
space-around：コンポーネントの周りのスペースを全て等しく
space-evenly：スペースを全て等間隔
■ alignItems：配置ルール（flexDirectionと直角方向）
flex-start ：始端側に詰める。デフォルト値
flex-end ：終端側に詰める
center ：中央寄せ
stretch：スペースいっぱいに子コンポーネントを引き伸ばす
baseline：ベースラインにそろえる
■ props：コンポーネントの入力（外部から渡される）
親 → 子へデータを渡す
■ state：コンポーネントそのものが持つデータ
stateを使うためには、useStateを用いる
※props もしくは state の内容が変更されると再描画
■ useEffect：非同期させたいとき（副作用）
（引数）
第１引数：指定した関数を実行
第２引数：変数（この変数が変更されたタイミングで、第１引数の関数が実行される）配列で複数指定可能。指定しないことも可能（初期表示時のみ動作するイメージ）
（イメージ）
useEffect フックを
「componentDidMount と componentDidUpdate と componentWillUnmount がまとまったもの」と考えてOK
（参考）
https://ja.reactjs.org/docs/hooks-effect.html
■ Context：全コンポーネントからアクセス可能なグローバル変数..というイメージ
ユーザの属性値などを保持するイメージ（頻繁に変わる変数ではなく）
■ ref：コンポーネントの描画結果を変数に格納。アクセス可能とする。
reference の略。描画済みコンポーネントへの参照を与える
（例）
コンポーネントが持つメソッドを呼び出したい場合
■ サフィックス（なし・@2x・@3x）
画面の表示密度によって
実際に読み込まれるファイルが異なる
（表示密度に近いサフィックスを持つものが使用される）
サフィックスなし ： 等倍 ： logo.png
サフィックス@2x ： 2倍 ： logo@2x.png
サフィックス@3x ： 3倍 ： logo@3x.png
■ 表示密度
論理的なピクセル１つが物理的なピクセルいくつ分に相当するか表した数字
（PixelRatio.get関数で確認可）
■ 画像管理（iOS・Android）
iOS：Asset Catalog
→ Xcodeの Images.xcassets
Android：drawable
→ android/app/src/main/resディレクトリ
以下のディレクトリ名
drawable-mdpi ：100%「大きさ」
drawable-hdpi ：150%
drawable-xhdpi ：200%
drawable-xxhdpi ：300%
drawable-xxxhdpi：400%
「大きさ」は、画像ファイルの大きさをどの程度拡大すればよいのかを示す
ファイル名は、すべて同一とする
■ 画像
uriにネットワーク上の画像（URL）の指定可
画像はキャッシュされ、次回から高速に表示される
■ 画像の使い分け
UI に必要な画像・・・JavaScript層で管理
コンテンツ画像・・・ネットワーク経由
（メリット / デメリット）
JavaScript層で管理：大きな画像だと、アプリサイズが肥大。インストール時にユーザーに不利益
ネットワーク経由：初回表示に時間がかかる。ユーザが操作に困る
■ resizeMode
Imageコンポーネントで、リサイズ必要な場合
（resizeModeで指定可能な値）
cover：余白ができないよう画像を拡大/縮小。アスペクト比を保持。
contain：画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持。
stretch：画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持しない。
repeat：拡大縮小せず、左上から右上へ画像を敷き詰める。
center：拡大縮小せず、表示領域の中心を画像の中心とする。
※アスペクト比とは、画面や画像の縦と横の長さ（画素数）の比
（表示サイズのパターン）
1 width：400 height：300
2 width：200 height：100
3 width：400 height：50
4 width：50 height：400
■ ScrollViewコンポーネント
スクロール可。
■ FlatList
配列を表示する際に便利
FlatListには、以下２つのpropsが必須
data：表示すべき配列
renderItem：配列内の各データをどのように描画するか
■ renderItem関連：指定する関数の引数
item：配列内の各データ →普段は、こちらのみ
index：配列の何番目にあるかのインデックス
separators：各データの間に表示する区切りを操作するための関数群
■ renderItem関連：ヘッダー・フッター
ListHeaderCompornent：ヘッダー
ListFooterComponent：フッター
■ SectionList
いくつかのグループに分かれているデータを表示するのに便利
（データ構造の指定が必要）
■ FlatList のkey
データに一意な識別子を指定する必要がある
id
key
keyExtractor
■ horizontal
FlatList で横スクロールしたい場合
■ numColomns：複数列の表示を指定できる
※horizontal と同時に指定することができない
■ refreshing：現在データの更新中かどうか示すboolean値
onRefresh に、ユーザがリストを下に引っ張ってデータ更新した場合の
コールバック関数を指定
※ Pull To Refresh = 下に引っ張って更新
■ onEndReached：データ最後のアイテムが表示された場合
■ Touchable 系コンポーネント
（ボタンのコンポーネント）
TouchableWithoutFeedback：押下した際、見た目が変化しない
TouchableNativeFeedback：（Androidのみ）リップル効果を付与できる
TouchableOpacity：押下した際、透過度が変動
TouchableHightLight：押下した際、背景色が変動
（コールバック関数）
onPress
（非活性）
disabled
■ Button コンポーネント
簡易なボタン
■ TextInputコンポーネント
文字入力を受け取るコンポーネント。
value：入力欄に表示すべき値
onChangeText：入力が変更された場合に呼ばれるコールバック関数
（TextInput のprops）
multiLine：改行を許可するかどうか
placeholder：プレースホルダー
returnKeyType：完了ボタンのラベル
secureTextEntry：非表示化
editable：編集可否
keyboardType：表示するキーボード
autoCapitalize：文字を自動的に、大文字に変換
autoCompleteType：補完時の文脈を与える
autoCorrect：自動補完の有効にするかどうか
maxLength：最大入力長
■ StatusBarコンポーネント
ステータスバーの見た目
■ ActivityIndicatorコンポーネント
何か処理している最中であることを示す（検索中みたいな場合）
■ Switchコンポーネント
on/off を示すUI
■ AppState ユーティリティ：現在のアプリの状態、変更した際の処理
（アプリが取り得る状態）
active ：前面
inactive ：起動アプリ一覧画面、backgroundへ移行する間（iOSのみ）
background：ホーム画面 or 他アプリが前面にある
■ Dimensions ユーティリティ
デバイスサイズの取得 or 向きが変わった場合の処理
■ Linking ユーティリティ
URLを開く
■ PermissionsAndroid ユーティリティ
Androidのみ。アプリに許可する機能：都度ユーザにモーダルダイアログで確認してもらう
（参考）
カメラの使用したい場合は以下に追加
android/app/src/main/AndroidManifest.xml
<uses-permission android:name=“android.permission.CAMERA” />
============================================
パフォーマンス最適化
（参考）
（上記より抜粋）
■メインスレッド（Native）側 = UI
・useNativeDriver
→Animated.timing してる場合にtrueとすると改善するかも
■JavaScriptスレッド（ビジネスロジック）側 = ビジネスロジック
レンダリング
※レンダリング回数 = state更新回数 × 更新対象のコンポーネント数
state更新
・useRef（画面描画と関係ない変数はuseRef）
・そもそも更新を減らす
更新対象のコンポーネント
・memo化（もしくは、pureComponent）：propsに変化ない（=浅い比較）場合、再レンダリングしない
※ツール
why-did-you-renderでチェックできる
