React Nativeメモ
SafeAreaView
SafeAreaViewの目的はデバイスのセーフエリア境界内のコンテンツをレンダーすること。
SafeAreaViewはネストされたコンテンツをレンダーして、ナビゲーションバー、タブバー、他の祖先ビューによって覆われていないビューの部分を反映するためにパディングを自動的に適用する。さらに、最も重要なことで、丸い角もしくはカメラノッチ(すなわちiPhone Xのセンサーハウジングエリア)セーフエリアのパディングは画面の物理的な制限を反映する。
ScrollView
タッチロッキング「レスポンダー」システムによって統合を提供している間のプラットフォームScrollViewをラップするコンポーネント。
(スクロールインタラクション経由で)制限されたコンテナ内の無制限の高さを含めるので、ScrollViewsが作動するための制限された高さを持つことを考え続けること。ScrollViewsの高さを制限するために、直接ビューの高さをセット(めんどくさい)するかすべての親ビューを確認するかのどちらかが制限された高さをもつ。{flex: 1}をビュースタックに転送し忘れることはエラーを誘発させる。要素監察がデバッグを早くさせる。
<ScrollView> vs <FlatList>
ScrollViewはいったんすべてのreactの子コンポーネントをレンダーするが、これはパフォーマンス欠点を持つ。
表示したいアイテムのとても長いリストを持つことを想像して見てください。(表示されないことが多いが)すべて一度にJSコンポーネントとnativeビューを作ることはレンダリングを遅くしていてメモリ使用を増加させている。
これはFlatListの出番。FlatListはゆっくりとアイテムを描画して、スクロールがメモリと処理時間を保つために画面を離れるアイテムを排除する。
もしボックスの外をサポートしているアイテム、複数カラム、無限スクロールローディング、もしくは他の多くの機能の間の区切りを描画したいならFlatListは便利である。
View
UIをビルドすることで最も基本的なコンポーネントであるViewはフレックスボックス、スタイル、いくつかのタッチハンドリング、そしてアクセシビリティ管理によるレイアウトをサポートするコンテナである。ViewはReact NativeがUIView、<div>、android.viewなどのように起動しているプラットフォーム上で等しいnativeビューを直接マップする。
合成タッチイベント
Viewレスポンダーprops(すなわちonResponderMove)によって、合成タッチイベントは以下の形式で渡される:
nativeEvent
changedTouches - 最後のイベント以降に変更したすべてのタッチイベントの配列。
identifier - タッチのID。
locationX - タッチのX座標、相対要素。
locationY - タッチのY座標、相対要素。
pageX - タッチのX座標、相対ルート要素。
pageY - タッチのY座標、相対ルート要素。
target - タッチイベントを投げている要素のノードid。
timestamp - タッチの時間識別子、速度計算に便利。
touches -画面上の現在のすべてのタッチの配列。
Text
テキストを表示するためのReactコンポーネント。
Textはネスティング、スタイリング、タッチハンドリングをサポートする。
ネストされたテキスト
AndroidとiOSの両方は(iOS上のNSAttributedString、Android上のSpannableString)太字もしくは色づけられたテキストのような特定のフォーマットで文字列の注釈された範囲によってフォーマット化されたテキストを表示させる。実際は、これはとてもひどい。React Nativeによって、同じ効果を達成するためにテキストをネストできるwebパラグラムを使うことに決定した。
コンテナ
<Text>要素は一意な相対的なレイアウトである:中のすべてはフレックスボックスレイアウトを使うのではなくテキストレイアウトを使っている。これは<Text>の中の要素が長方形というわけではなく、行の最後を見るときにラップしている。
FlatList
たいていの便利な機能をサポートするためのレンダリング基礎のプラットフォームインターフェース、フラットリスト:
十分なクロスプラットフォーム
オプション水平モード
設定可能な視認性コールバック
ヘッダーサポート
フッターサポート
セパレーターサポート
リフレッシュのためのプッシュ
スクロールローディング
ScrollToIndexサポート
複数カラムサポート
複数カラムを描画するために、numberColumns propを使うこと。
FlatListのextraData={selected}を渡すことで、FlatList自体がstateが変更するときに再レンダーする。このpropを設定なしで、FlatListはPureComponentなのでアイテムを再描画する必要があることを知らず、このprop比較は変更を見ない。
keyExtractorはデフォルトkeyプロパティの代わりにreact keyのidを使うためにリストすることを伝える。
これは<VirtualizedList>のまわりの便利なラッパーで、ここにリストされていない(<ScrollView>と同じ)propsを継承する。
初期stateはコンテンツがレンダーウィンドウの外にスクロールするときに保たれない。アイテムデータもしくはFlux、Redux、Relayのような外部ストアで確保されたすべてのデータを確認すること。
もしpropsがシャローイコールを残すならこれは再描画しない意味をもつPureComponentである。renderItem関数が依存するすべてのことが更新後に===でないprop(すなわちextraData)として渡されることを確認し、UIは変更を更新しない。これはデータpropと親コンポーネントstateを含む。
メモリを拘束し、スムーズなスクロールを有効にするためにコンテンツは非同期オフスクリーンをレンダーさせる。これは充填率より早くスクロールし、空のコンテンツを一瞬で見ることができるという意味。これはさまざまなアプリケーションの必要性と合うために調整させることができるトレードオフで、画面の後ろで改善することで動いている。
デフォルトで、リストは様々なアイテムでkey propを探してReact keyを使う。代わりに、カスタムkeyExtractorpropを提供できる。