React Native 環境構築 (2021/1 現在)

完全に思いつきでReact Nativeを触ってみた。
TypeScript触れられたらいいやぐらいの軽い気持ちで触ったら罠にハマりました。
だだの備忘録なので記事的面白みはゼロです。

React Native
reactnative.dev

Setting up the development environment
reactnative.dev
基本的にここでセットアップできる。

ひとまず今回はAndoridで動かすのを目標。
iOSに関してはまた追記していく。
Android iOS両方動いたので追記済み

環境構築

最新はVersion 0.63

• Expo CLI Quickstart
• React Native CLI Quickstart

のどちらかの方法。今回は赤字の方。

global に react-native-cli がインストールされていたらアンインストールしておく。
（競合が起こるっぽい？）

必要なライブラリをインストール

brew install node
brew install watchman 
brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 // Android
sudo gem install cocoapods // iOS

パスを通す

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

source ~/.bash_profile 

プロジェクトの作成

npx react-native init AwesomeProject

オプション
バージョンの指定やTypeScriptの指定ができる

npx react-native init AwesomeProject --version X.XX.X
npx react-native init AwesomeTSProject --template react-native-template-typescript

実行する

Start Metro
Metro is a JavaScript bundler. It takes in an entry file and various options, and gives you back a single JavaScript file that includes all your code and its dependencies.

端的に言うとReactNative用のJavaScriptバンドラー。

facebook.github.io
github.com

Metro実行

npx react-native start

別Terminalで実行（AndroidStudioやXcodeのRunでも可）

npx react-native run-android // Android
npx react-native run-ios // iOS

←iOS：Android→

詰まったところ

• npx react-native run-androidコマンドで動かせなかった

stackoverflow.com

gradle/wrapper/gradle-wrapper.properties.

- distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
+ distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

• adbがTerminalで動作しない

Terminal にadbのパスを通す

export PATH=$PATH:/Users/username/Library/Android/sdk/platform-tools
source ~/.bash_profile 

• デバイスの確認

adb devices
// 結果
List of devices attached
emulator-5554 device