React Nativeのメモ

アプリの初期化

# アプリの雛形を作成
expo init SampleApp

# アプリを起動
cd SampleApp
expo start

# テストの追加
yarn add --dev jest

# Redux
yarn add redux
yarn add react-redux

# 画面遷移
yarn add react-navigation

# flow
yarn add --dev flow-bin@0.61.0 babel-preset-flow

package.json

"license": "UNLICENSED",
"scripts": {
    ...
    "flow": "flow",
    "flow-stop": "flow stop”
}

.flowconfig

[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/libdefs.js
[include]
[libs]
./libdefs.js
[options]
all=true

var, let, constによる変数宣言

varは関数スコープ
letはブロックスコープ
constはブロックスコープでイミュータブル

コンポーネントのkey

コンポーネントがレンダリングされる際、コンポーネントはkeyという属性を保持している。 したがって、次のようにkeyを指定せずにコンポーネントをレンダリングしようとすると、warningが発生する。

<View>
  { ["1", "2", "3"].map((item) => {
    return (<Text>{"アイテム: " + item}</Text>) // warning
  })}
</View>

keyの指定にはkeyExtractorという専用の属性が存在し、keyの指定にはこれを用いることができる。

keyExtractor={(item, index) => "hoge_" + item.index}