React Nativeの学習フロー

記事制作中なので、いいね！かストックしていただければと思います

expoを準備

開発する際のツールであるexpoを準備します

リンクを開く
https://expo.io/

Get Startedを押す

体験する

Node.jsをインストール

ここでは割愛します

expoをインストール

expoを入れる

npm install expo-cli --global

expoのアカウントを作成する

メールアドレスとパスワード、ユーザー名を入力してアカウントを作成

ターミナル上でexpoにログインします

expoにログインする

expo login

# ユーザー名とパスワードを入力
>[? Username/Email Address: ユーザー名を入れる
>[? Password: [hidden] パスワードを入力する

# 成功
Success. You are now logged in as ユーザー名.

エラーが出る場合

エラー

$ expo login
-bash: expo: command not found

pathを通して改善させます

pathを通し直す

export PATH=~/.npm-global/bin:$PATH
source ~/.profile

参考リンク
https://teratail.com/questions/195042

プロジェクトの作成

プロジェクトの作成

$ expo init アプリ名

エラーが出る場合

エラー

-bash: expo: command not found

pathを通し直す

export PATH=~/.npm-global/bin:$PATH
source ~/.profile

それか、npxをつければ成功します

npxをつけてプロジェクトの作成

npx expo init アプリ名

参考リンク
https://tech.mof-mof.co.jp/blog/get-started-react-native-with-expo/

処理が成功すると、選択肢が出てくる

選択肢を選ぶ

 ----- Managed workflow -----（expoを使って、簡単にアプリを作成する）
  blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
 ----- Bare workflow -----（expoを使わず、カスタマイズ性を高く開発できるが難易度が高い
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration 

ここでは、blankを選択する

理解を深める参考リンクhttps://irisash.github.io/react_native/initialize/

Expo と React Native CLI の違い
Expo を使うメリットは、QRコードを読むだけで簡単に実機で動作確認できるという点です。 React Native CLI でプロジェクトを進める場合は、Xcode や Android Studio のインストールや環境設定が必要となり、 開発はシミュレーターを使って動作確認していくことになります（実機ビルドも可能です）。 よりアプリのネイティブの知識がなく開発を進めていくことができます。

逆に React Native CLI を使うメリットは、iOS/Android のネイティブ言語での開発を組み込んだり、 またネイティブ言語で作成されたライブラリを使用することができるという点です。 Expo ではexpo ejectという操作をすることで、そのようなライブラリを導入することができるようになります。 ただし、ejectすると Expo 自体の機能が使えなくなり、React Native CLI の開発と同様の進め方となります。

expo を立ち上げる

expo start

ブラウザ上にexpoの画面が立ち上がります

このQRコードでスマホ上で画面を再現できるとか

エミュレーターを起動する

スマホのシュミレーションするためのソフトです

Run on Android device/emulator
Androidのシュミレーター
※補足：動かすにはAndroid studioをインストールする必要がある。
Android studioがない場合、エラーが表示される

エラー

Couldn't start project on Android: Error running adb: No Android connected device found, and no emulators could be started automatically.
Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator).
Then follow the instructions here to enable USB debugging:
https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.

Run on iOS simulator
iOSのシュミレーター
※補足：動かすにはXcodeをインストールする必要がある。

インストールしていない場合に表示されるエラー

Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`.

画面上だとこんな感じで、エラーが表示される

Android Studioをインストール

Android Studioのインストールする流れはマニュアルにも記載されています
https://docs.expo.io/workflow/android-studio-emulator/

Android Studioのインストール画面
https://developer.android.com/studio

インストール方法はこの記事がわかりやすいです
https://akira-watson.com/android/adt-mac.html

インストールを完了したら
Android Studioを起動する

Android Studioのアプリを起動させます

設定を確認します

参考になる記事
MacにAndroid Studioを入れて、adbを使える状態にする

Android SDKの設定確認

パスを確認して、コピーします


この例だとUsers/ownerになっています

この後、pathを利用するので、コピーしておきましょう

adbを使えるようにする

参考：MacのPCからADBコマンドを利用できるようにする(すでにJavaがPCに入っている人向け)

vimで~/.bash_profileを開く

ターミナル

$ vi ~/.bash_profile

adbを使えるようにするために、bash_profileに追記する

~/.bash_profileに追記

# pathは先ほど確認したものを貼り付けます。
# この例だとownerを記載してますが、あなたのusernameに変更してください
export ANDROID_SDK=/Users/owner/Library/Android/sdk

~/.bash_profileに追記

# pathは先ほど確認したものを貼り付けます。
# この例だとownerを記載してますが、あなたのusernameに変更してください
export PATH=/Users/owner/Library/Android/sdk/platform-tools:$PATH

この例だと一番下に追記しています

:wqで保存します

保存したら、反映させます

ターミナル

$ source ~/.bash_profile

確認
下記コマンドを実行して「adb command not found」と出力されなければ導入成功です

ターミナル

$ adb

# 失敗
-bash: adb: command not found

仮想デバイスをセットアップする

1.Android Studioのメイン画面から、に移動しConfigure -> AVD Managerます。
2."+ Create Virtual Device"を押す
3.機種を選択
4.インストールしたいAndroidのバージョンのDownloadボタンを押す
5.ダウンロードの完了を待つ
6.finishを押して完了
7.デバイス一覧に追加されている

容量を圧迫する場合の対処

まずこれ
http://akira.watson.jp/android/android-avd.html
削除方法はこちら
https://hiramekun.hatenablog.com/entry/2018/06/08/111054

【最適解】とりあえず、これをやれば軽くなります
Macが重いときにやることまとめ

編集する

イメージはexpoとreactが用意している小さなパーツを組み合わせて、アプリの大きなパーツを作る。パーツを組み合わせてアプリを完成させる。
機械で言えば、ネジやボルト、配線などの組み合わせて、機械の大きなパーツを作るのと同じ。
このパーツのことをコンポーネントと読んでいる。小さなパーツであるコンポーネントを組み合わせて、アプリの大きなパーツ（コンポーネント）を作成する。最終的にコンポーネントを組み合わせて、アプリが完成する。

React Nativeのコンポーネント
expoのコンポーネント

必要なタグを参照して利用していきましょう

Stylesheet

App.js

import React from "react";
# ここでタブをインポート
import { StyleSheet, Text, View, Image } from "react-native";

export default function App() {
  return (
    #{}でjsの記述が可能。
    #styles = StyleSheetで呼び出している
    <View style={styles.container}>
      <View style={styles.itemContainer}>
        <View style={styles.leftContainer}>
          <Image
            style={{ width: 100, height: 100 }}
            source={{
              uri: "https://picsum.photos/200/300",
            }}
          />
        </View>
        <View style={styles.rightContainer}>
          <Text numberOfLines={3} style={styles.text}>
            これがあああああああああああああああ、カットされるみたいなんだけど、どうあらおうだああああああああああああああうおおおおおおおおおおおおおおおおおおお
          </Text>
          <Text style={styles.subText}>ReactNews</Text>
        </View>
      </View>
    </View>
  );
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row",
  },
  leftContainer: {
    width: 100,
  },
  rightContainer: {
    flex: 1,
    flexDirection: "column",
    padding: 10,
    justifyContent: "space-between",
  },
  text: {
    fontSize: 15,
  },
  subText: {
    fontSize: 12,
    color: "gray",
  },
});

よく使うstyles

参考になるので、こちらを参照して欲しいです
https://qiita.com/nitaking/items/52ca6c23ba7c6c171d0e

Textタグ

画面推移

画面推移の方法をここでは記載していきます。

準備

React Nativeの公式ガイド
expoの公式ガイド
React Navigationのガイド

react-navigationのインストール

react-navigationのインストール

npm install @react-navigation/native



+ @react-navigation/native@5.5.1
removed 2 packages, updated 1 package and audited 788 packages in 6.871s

# 成功
9 packages are looking for funding
  run `npm fund` for details

found 9 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

StackNavigatorのインストール

ガイドページ
ルーティングの元になる

npm install @react-navigation/stack

実装

全体図

AppNavigator -------StackNavigator
                          |
                          |
                          |----HomeScreen
                          |
                          |
                          |----ArticleScreen

stackNavigatorがルーティングの役割を担う

ガイド

ガイドの見本

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';

# importして追加している
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


# 別ファイルでHomeを定義しても可能
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}


# StackNavigatorをcreate
const Stack = createStackNavigator();

function App() {
  return (
    # Homeに移行させる
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

1.screensというフォルダを作成
2.その中にHomeScreen.jsを作成

3.ファイルをimportで読み込む

HomeScreen.js

# 追加
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

エラーが出た場合

Unable to resolve "react-native-gesture-handler" from "node_modules/@react-navigation/stack/src/views/BorderlessButton.tsx"
Failed building JavaScript bundle.

参考ページ

コマンドでhandlerを入れて直す

expo install react-native-gesture-handler

コンポーネント

React Nativeのコンポーネント
expoのコンポーネント

Reduxのインストール

Reduxの公式ページ

npm install redux react-redux

Provider

デバッカー

react-native-debugger

インストール

$ brew update && brew cask install react-native-debugger

redux-devtools-extension

インストール

npm install --save redux-devtools-extension

通知機能

通常の通知

参考になる記事
RN(expo)でNotification

ローカル通知

参考になる記事
React Native+Expoでジオフェンシングを使ったリマインドアプリを作って忘れっぽい自分を救う！
async/await 入門（JavaScript）

位置情報

公式ガイド location
ReactNative(Expo)でMapを利用する