React Nativeの学習フロー

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


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

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

###Get Startedを押す
[![Image from Gyazo](https://i.gyazo.com/c9e31ce52960b775327e7f6795d58a8b.gif)](https://gyazo.com/c9e31ce52960b775327e7f6795d58a8b)

###体験する
[![Image from Gyazo](https://i.gyazo.com/d323f30bf43cf6daef4bb6751056089b.gif)](https://gyazo.com/d323f30bf43cf6daef4bb6751056089b)

###Node.jsをインストール
ここでは割愛します

###expoをインストール
```:expoを入れる
npm install expo-cli --global
```

[![Image from Gyazo](https://i.gyazo.com/7ea5559dd8b4ea4c845a8820426baaf2.gif)](https://gyazo.com/7ea5559dd8b4ea4c845a8820426baaf2)

### expoのアカウントを作成する
メールアドレスとパスワード、ユーザー名を入力してアカウントを作成
[![Image from Gyazo](https://i.gyazo.com/a7839abc1bddf2e3de12944def705839.gif)](https://gyazo.com/a7839abc1bddf2e3de12944def705839)

ターミナル上で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 アプリ名
```
[![Image from Gyazo](https://i.gyazo.com/36ede3b35abc19d0d97e409b108a6958.gif)](https://gyazo.com/36ede3b35abc19d0d97e409b108a6958)

### エラーが出る場合

```:エラー
-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/

処理が成功すると、選択肢が出てくる
[![Image from Gyazo](https://i.gyazo.com/8799c678eaed8a23b9ab927b8a3e0658.png)](https://gyazo.com/8799c678eaed8a23b9ab927b8a3e0658)

### 選択肢を選ぶ

```
 ----- 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を選択する

[![Image from Gyazo](https://i.gyazo.com/0ed7ef6017a0e7b709dbe8132eb27c94.gif)](https://gyazo.com/0ed7ef6017a0e7b709dbe8132eb27c94)

理解を深める参考リンク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の画面が立ち上がります
[![Image from Gyazo](https://i.gyazo.com/61b4c6528c9209454dae433122b3d490.png)](https://gyazo.com/61b4c6528c9209454dae433122b3d490)
この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`.
```


画面上だとこんな感じで、エラーが表示される
[![Image from Gyazo](https://i.gyazo.com/f3512411ad0f03acfeecde6fe2b77b5f.gif)](https://gyazo.com/f3512411ad0f03acfeecde6fe2b77b5f)


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

Android Studioのインストール画面
https://developer.android.com/studio
[![Image from Gyazo](https://i.gyazo.com/a8c69618ece93d55c597a6a3ce8c897b.gif)](https://gyazo.com/a8c69618ece93d55c597a6a3ce8c897b)

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


インストールを完了したら
Android Studioを起動する
[![Image from Gyazo](https://i.gyazo.com/7b6697526c1dc4d1eca7e275dc4840fa.gif)](https://gyazo.com/7b6697526c1dc4d1eca7e275dc4840fa)

Android Studioのアプリを起動させます
[![Image from Gyazo](https://i.gyazo.com/16fba0befbfe238c07aada8c48bb0d56.png)](https://gyazo.com/16fba0befbfe238c07aada8c48bb0d56)

#### 設定を確認します
参考になる記事
[MacにAndroid Studioを入れて、adbを使える状態にする](https://qiita.com/krile136/items/47b2e2cf2a7e586b6da3)

##### Android SDKの設定確認
[![Image from Gyazo](https://i.gyazo.com/30373db5b5a84035b5c595564a01e328.gif)](https://gyazo.com/30373db5b5a84035b5c595564a01e328)

[![Image from Gyazo](https://i.gyazo.com/677bfeaa51c1704890ef9427963566d8.gif)](https://gyazo.com/677bfeaa51c1704890ef9427963566d8)

パスを確認して、コピーします
[![Image from Gyazo](https://i.gyazo.com/6633d6026fb9d8bb32956a8018013b5a.gif)](https://gyazo.com/6633d6026fb9d8bb32956a8018013b5a)
[![Image from Gyazo](https://i.gyazo.com/153a87b308e409136c9167a7a4a7f7ca.png)](https://gyazo.com/153a87b308e409136c9167a7a4a7f7ca)
この例だとUsers/ownerになっています

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

##### adbを使えるようにする
[参考：MacのPCからADBコマンドを利用できるようにする(すでにJavaがPCに入っている人向け)](https://qiita.com/miriwo/items/cb0fa4c2def859bc2641)

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
```

この例だと一番下に追記しています
[![Image from Gyazo](https://i.gyazo.com/f7096c69c8958a540cf2aeb186492833.gif)](https://gyazo.com/f7096c69c8958a540cf2aeb186492833)

``: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が重いときにやることまとめ](https://qiita.com/fujiwarawataru/items/b68d30697b0f4834e5d2)





# 編集する

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

[React Nativeのコンポーネント](https://reactnative.dev/docs/components-and-apis.html)
[expoのコンポーネント](https://docs.expo.io/versions/latest/)

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

## Stylesheet
```javascript: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タグ
https://docs.expo.io/tutorial/text/



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

## 準備
[React Nativeの公式ガイド](https://reactnative.dev/docs/navigation)
[expoの公式ガイド](https://docs.expo.io/guides/routing-and-navigation/)
[React Navigationのガイド](https://reactnavigation.org/docs/getting-started)




###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のインストール
[ガイドページ](https://reactnavigation.org/docs/stack-navigator/)
ルーティングの元になる

```StackNavigatorのインストール
npm install @react-navigation/stack
```

## 実装

````:全体図

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

````

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

[ガイド](https://reactnavigation.org/docs/hello-react-navigation)

```react:ガイドの見本
// 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を作成
![スクリーンショット 2020-06-20 9.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455403/f66842ce-4497-0d95-8b85-3cbba9a2da35.png)
3.ファイルをimportで読み込む

```react:HomeScreen.js
#追加
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

```

### エラーが出た場合

[![Image from Gyazo](https://i.gyazo.com/52f1f3c78962d9ffe13fd65129e07006.png)](https://gyazo.com/52f1f3c78962d9ffe13fd65129e07006)

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

[参考ページ](https://github.com/expo/expo/issues/5107)

```:コマンドでhandlerを入れて直す
expo install react-native-gesture-handler
```

#コンポーネント
[React Nativeのコンポーネント](https://reactnative.dev/docs/components-and-apis.html)
[expoのコンポーネント](https://docs.expo.io/versions/latest/)

#Reduxのインストール

[Reduxの公式ページ](https://redux.js.org/api/combinereducers)

```
npm install redux react-redux
```

[Provider](https://react-redux.js.org/7.1/api/provider#provider)

# デバッカー
[react-native-debugger](https://github.com/jhen0409/react-native-debugger)

```:インストール
$ brew update && brew cask install react-native-debugger
```

[redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)

```:インストール
npm install --save redux-devtools-extension
```

# 通知機能

## 通常の通知
参考になる記事
[RN(expo)でNotification](https://qiita.com/zaburo/items/0c2550743823bc1fe60e)

## ローカル通知
参考になる記事
[React Native+Expoでジオフェンシングを使ったリマインドアプリを作って忘れっぽい自分を救う！](https://qiita.com/mido_app/items/e4b6b378cbdc0e63649b#%E3%82%B8%E3%82%AA%E3%83%95%E3%82%A7%E3%83%B3%E3%82%B7%E3%83%B3%E3%82%B0api)
[async/await 入門（JavaScript）](https://qiita.com/soarflat/items/1a9613e023200bbebcb3)
[](https://qiita.com/mildsummer/items/9dbfac3bf2ef857ca74f)

# 位置情報

[公式ガイド location](https://docs.expo.io/versions/v35.0.0/sdk/location/#background-location-methods)
[ReactNative(Expo)でMapを利用する](https://qiita.com/zaburo/items/0bd2e92fb10c50767538)