Argon React Native で React Native をはじめる〜開発環境作り〜

Expo.io

2020.01.31

現状・条件
Argon React Native とは
Argon React Native 環境を設定する
シミュレータでデバッグ環境を設定する
デバイスでデバッグ環境を設定する
1. Android / iOS 用の Expo アプリを下記のリンクからお持ちの各デバイスにインストールします。
2. Expo の Metro Bundler や CLI で表示されている QRコードを読み取ってアプリを起動できます。
アプリを確認
あとがき

現状・条件

MacBook Pro / macOS Catalina 10.15.3
node@v12.14.1 / npm@6.13.4 ( by nodebrew )
expo-cli@3.11.7
Android Studio 3.5.3 for Mac
Xcode 11.3.1

Argon React Native とは

Argon React Native は Galio.io、React Native、Expo の上に構築された完全にコード化されたアプリのテンプレートで、強力で美しい e コマースモバイルアプリケーションを作成できます。

豊富なコンポーネントを利用して独自のアプリを速やかに開発できると言われています。

ちなみに、
Argon は Bootstrap4 用であり、Google の Material-UI の方が欲しい方は Material Kit React Native の方がいいかもしれません。（デザインだけが違います）

Argon React Native 環境を設定する

公式文書をベースに設定していきます。

Step 1

Argon React Native コードをダウンロード

ここからダウンロードしてプロジェクトフォルダの下に圧縮ファイル ( zip ) を解凍します。( アカウント登録が必要です )

try🐶everything ~$ mkdir ReactNative  # ディレクトリ名は任意
try🐶everything ~$ cd ReactNative
try🐶everything ReactNative$ mv ~/Downloads/argon-react-native-master .
try🐶everything ReactNative$ cd argon-react-native-master/
try🐶everything argon-react-native-master$

Step 2
Expo CLI をインストール
最新に node.js をインストールしておきます。
詳細は Nodebrew で Node.js の環境を管理する〜macOS〜記事をご参考ください。

ターミナルコンソールから npm install expo-cli or yarn global add expo-cli コマンドを実行して Expo をインストールします。

※ 詳細は Expo.io で React Native 開発環境を構築する〜macOS〜記事をご参考ください。
```
try🐶everything argon-react-native-master$ npm install -g expo-cli
...

+ expo-cli@3.11.7
added 1575 packages from 929 contributors in 128.149s
try🐶everything argon-react-native-master$ 
```

Step 3

関連パッケージをインストール

先ほど作成したプロジェクトディレクトリに移動し、 npm install or yarn install コマンドを実行します。( 必要に応じて npm audit fix コマンドも実行してください )
これで、Argon React Native が使える状態になります。

try🐶everything argon-react-native-master$ npm install
...
added 866 packages from 451 contributors and audited 37849 packages in 45.176s

9 packages are looking for funding
  run `npm fund` for details

found 14 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
try🐶everything argon-react-native-master$ npm audit fix
...
9 packages are looking for funding
  run `npm fund` for details

fixed 0 of 14 vulnerabilities in 37849 scanned packages
  14 vulnerabilities required manual review and could not be updated
try🐶everything argon-react-native-master$

Step 4

Expoを起動

expo start コマンドを実行します。

try🐶everything argon-react-native-master$ expo start
Starting project at /Users/rnuser/ReactNative/argon-react-native-master
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19001.
Tunnel ready.

  exp://192.168.11.4:19000
...

問題なければ、デフォルトブラウザで Expo DevTools ( Metro Bundler ) が立ち上がります。

Step 5
Expo 環境でのスクリーンのサポートを設定します。
Expo の Metro Bundler や CLI で「Run on Android device/emulator」など、エミュレータ ( シミュレータ ) を起動したら下記のようなエラーが発生します。( ※ 問題ない方はここをスキップしてください )

エラー文：
Unable to resolve “react-native-screens” from “node_modules/react-navigation-stack/lib/module/views/StackView/StackViewCard.js”
Failed building JavaScript bundle.

スクリーンのサポートはExpo SDK 30+、react-navigation 2.14.0+ から組み込まれています。下記のように確認しておきましょう。
```
# react-navigation@3.11.0
try🐶everything argon-react-native-master$ cat package.json | grep "react-navigation"
    "react-navigation": "^3.11.0"

# expo SDK@35.0.0
try🐶everything argon-react-native-master$ cat package.json | grep "sdk"
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
try🐶everything argon-react-native-master$ 
```
スクリーンライブラリをプロジェクトの依存関係として追加します。
```
try🐶everything argon-react-native-master$ yarn add react-native-screens
```
App.js ファイルをオープンして下記の内容を最後の import 文の後に追加してください。
```
import { enableScreens } from 'react-native-screens';

enableScreens();
```
▲ useScreens ( x ) → enableScreens ( O )

これで、シミュレータやデバイスでアプリを起動すると問題なくアクセスできると思います。

シミュレータでデバッグ環境を設定する

Step 1
Android エミュレータ環境を設定します。

Expo.io で React Native 開発環境を構築する〜macOS〜：Android エミュレータ環境を設定する記事をご参考ください。
Step 2
iOS シミュレータ環境を設定します。

Expo.io で React Native 開発環境を構築する〜macOS〜 : iOS シミュレータ環境を設定する記事をご参考ください。