buto > /dev/null

だいたい急に挑戦してゴールにたどり着かずに飽きる日々です

React Nativeを始めてみた

やっとReact Native始めました

夏頃からReact Nativeやるぞ〜と言って早数ヶ月…すっかり寒くなってしまった

今日やっとReact Nativeに入門しました!!

React NativeはJavaScriptフレームワークReactのモバイル版で、1つのコードでiOSAndroidどちらでも動くクロスプラットフォームが実現できる!

(Reactやったことないんだが、大丈夫かな)

開発環境を構築する

React Native環境構築手順

このQiita記事の通りにやっただけですが、書いていきます

また、今回はAndroid環境のみです

  • macOS

  • nodev12.18.2

  • npm6.14.5

  • AndroidStudio

  • OPPO R15 Neo

React Nativeをインストール

既にNode.js、npmはインストール済みだったので

Homebrewでファイルのバージョン管理ライブラリ?のwatchmanをインストール

(Qiitaに書いてあったからインストールしました これはなくても良いのかも)

brew update
brew install watchman

npmでReact Nativeをインストール

npm install -g react-native-cli

AndroidStudioの設定

私の環境ではOreoのみ入っていたので、QiitaにしたがってMarshmallowを追加しました

Google APIなどはデフォルトで入っているようだったので特に設定していません

あとはAndroidSDKにパスを通すだけ

vi ~/.bash_profile

# .bash_profileの末尾に以下を追加して保存
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

React Nativeプロジェクトを作成

あとはコマンドでプロジェクトを作成して実行するだけ!

以下のコマンドでReact Nativeプロジェクトを作成します

# 事前にプロジェクトを作るディレクトリに移動しておく
react-native init プロジェクト名

React Nativeプロジェクト実行!

プロジェクトが作成されたら、AndroidStudioを起動した状態でスマホを接続

スマホのUSBデバッグを有効にしておきます

AndroidStudio画面上部に接続したスマホが表示されていればOK f:id:butorisa:20201107190813p:plain

それでは実行!

cd プロジェクト名
react-native run-android

ん!?openjdkの開発元を検証できないため開ません!?

システム環境設定-セキュリティ-一般からopenjdkを許可すればいいみたい

これで再度react-native run-androidを実行するとプロジェクトのビルドが成功!

スマホにこんな画面が表示されました f:id:butorisa:20201107191757p:plain