ReactNativeを始めるときの雑多なメモ

React Native スマホアプリ

ReactNativeを始めるときの雑多なメモ



環境構築

https://expo.io をみたらOK。

  • Node.jsインストール
  • Expoインストール
  • Expo CLIインストール
    • npm instlal -g expo-cli
  • Expoでアカウント作成＆CLIでログイン
    • expo login


入れておくと便利なVSCodeプラグイン

  • Prettier … コード自動整形
    • VS内、ファイル　ユーザ設定で「Format On Save」を有効にする
    • 設定ファイルを作る、ルートに「.prettierrc」


Expoでプロジェクト作成&起動

  • expo init my-new-project

    • Managed workflow … Expoライブラリを使う、Expo上で動かす
    • Bare workflow … Expoライブラリを使う、ReactNative上で動かす

  • cd my-new-project

  • expo start

    • ブラウザが立ち上がる
      • QRコードを読んでスマホで動かす、Webで動かす、各エミュレータで動かす、などができる
      • うまく動かない時は、キャッシュをクリアして起動する-cをつけるとよい
        • expo start -c


各OS版をビルド


とりま使わないのでメモだけ。


Expoメリットデメリット

  • メリット
    • RNの機能を簡単に使える
      • Camera カメラを使う
      • ImagePicker 端末内の画像を選ぶ
      • Video ビデオ再生
    • OTAアップデート … 審査不要で更新できる
    • クラウドビルド … XCodeなしでビルドできる
  • デメリット
    • 使えないnpmモジュールあり
    • ネイティブSDK使えない（アプリ内課金、Bluetooth、広告計測等のサードパーティSDKなど）
    • ネイティブ関連処理はできない
      • Podfileコマンド実行
      • ネイティブコードのヘッダファイルのimport


Expoやめる場合は、ejectしてExpoなしプロジェクトに変換できる（一応）。


登場人物

JSX

  • HTMLタグのような、開始と終了タグで囲う記法
<Text>Hello, world.</Text>


Props

  • 性質を表す
  • 不変
  • メソッドへ値やメソッドを渡す
    • 親から子の方向、子から親はNG
    • onPressなど
<TodoInput onPress={this._onPress} />


Ref

  • コンポーネントの情報を渡せる
    • 現在位置や高さ、テキストフィールドの値など
<TextInput
    style={styles.textInput}
    ref={(ref) => { this.ref = ref; }}
/>


State

<View style={styles.todoListContainer}>
    <FlatList
        style={styles.todoList}
        data={list}
        renderItem={({ item }) => <TodoItem {...item} />}
    />
</View>


SFC (Stateful Functional Component)

  • class構文を使わず、関数としてコンポーネントを定義できる
  • 内部メソッドやstateを持てない、ライフサイクルイベントが使えない
  • 早い
const TodoItem = (props) => {
  const {
    text,
  } = props;

  return (
    <View style={styles.container}>
      <Text style={styles.text} >{text}</Text>
    </View>
  );
}


以上！！！！！