React nativeはフェイスブックが開発しているウェブ、アプリ各プラットフォームに対応するためのフレームワークです。JavaScriptで書かれているために比較的簡単に導入できるということ、アプリ開発が早くなるということで注目されています。今回からReact nativeでiOS、androidアプリを作っていきたいと思います。
環境の準備
最初は環境の準備が大変かもしれません。
各種プラットフォームの開発環境を整える必要があります。App StoreとGoogleplayはそれぞれでアプリケーションを開発しなくてはいけません。
そのプラットフォームに対応するための準備を進めていきます。各種のツールをまずはインストールしていきます。
アプリ開発環境のインストール
- Android studio
- xcode
開発環境をインストールできたら各環境でプロジェクトを作成していきます。
android開発に慣れていなかったので、相当数のエラーが出現しました。その度に検索するのも大変でした。初心者の方だと特に詰まってしまうようなところだと思いますので、メモしておきます。
androidアプリ開発環境を整える
androidの開発環境を作るときのエラー対策
* What went wrong: A problem occurred configuring project ':app'. > The SDK directory '/usr/local/opt/android-sdk' does not exist.
React NativeのAndroid実機ビルドと出たエラー対処メモ #rnjapan
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No online devices found.
シミュレーターを起動したい状態で、下記コマンドを実行すると正常に進むと書かれている記事が多いがなかなか解決されない。
react-native run-android
$ adb devices List of devices attached emulator-5554 offline
エミュレーターがオフラインになっていることが原因だと思われるので、修正方法
iOSアプリ開発環境を整える
まずはXCODEをApp Storeからインストールしておきます。
そのあとreact-nativeのアプリのプロジェクトのディレクトリで以下のコマンドを実行します。そうするとシミュレーターが自動実行されます。
react-native run-ios
react-nativeのデモプロジェクトを実行してみます。
ビルドがサクセスすると下記のようなテキストが表示されます。
Installing build/Build/Products/Debug-iphonesimulator/HelloReactNative.app Launching org.reactjs.native.example.HelloReactNative org.reactjs.native.example.HelloReactNative: 8989
まとめ
React nativeでとりあえずシミュレーターで起動するところまでをやってみました。Reduxも一緒に入れてみましたが、非常に開発しやすい環境ができましたね。
バージョンごとの干渉があるので、シミュレーターでエラーが出まくって大変でしたが、慣れてくると対応できるようになってきます。
npm install した時にシミュレーターでエラーが発生する場合は、一度シミュレーターを閉じてから再度下記を実行したりしてみると良いかもしれません。
This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following: 1. Clear watchman watches: `watchman watch-del-all`. 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
こういうエラーメッセージが多発することがあります。
ライブラリをインストールする時にこの問題が起きます。
コマンドライン、ターミナルにもエラーメッセージが出てきますが、下記のgithubのURLにも問題の解決方法が書かれています。
https://github.com/facebook/react-native/issues/4968
rm -rf node_modules && npm install
React nativeやJavaScriptでアプリを開発していきたいという方はこちらのスクールがオススメです！
Webcamp(ウェブキャンプ)proで転職。料金・口コミ・評判
