React nativeでiOS、androidアプリを作ってみる。開発環境の準備編

React nativeはフェイスブックが開発しているウェブ、アプリ各プラットフォームに対応するためのフレームワークです。JavaScriptで書かれているために比較的簡単に導入できるということ、アプリ開発が早くなるということで注目されています。今回からReact nativeでiOS、androidアプリを作っていきたいと思います。

2018年5月最新! ▼当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】「GEEK JOB【『無料で個別指導で挫折しない!』プログラミング教室、就職・転職成功率95%!上場企業へ内定】

【2位】WebCamp PRO (ウェブキャンププロ)【就職転職保証・返金保証・年収300万上がる】

【3位】WebCamp(ウェブキャンプ)【5ヶ月連続!3位】

ほかにも多くのプログラミングスクールがありますが、現役エンジニアが利用して間違いないスクールを厳選しています。

実際にWebCampに通って上場企業へ転職、年収が上がったエンジニアの話 → プログラミング未経験からエンジニアへ

環境の準備

最初は環境の準備が大変かもしれません。

各種プラットフォームの開発環境を整える必要があります。App StoreとGoogleplayはそれぞれでアプリケーションを開発しなくてはいけません。

そのプラットフォームに対応するための準備を進めていきます。各種のツールをまずはインストールしていきます。

アプリ開発環境のインストール

  • Android studio
  • xcode

開発環境をインストールできたら各環境でプロジェクトを作成していきます。

android開発に慣れていなかったので、相当数のエラーが出現しました。その度に検索するのも大変でした。初心者の方だと特に詰まってしまうようなところだと思いますので、メモしておきます。

androidアプリ開発環境を整える

gori9V9A8414_TP_V

androidの開発環境を作るときのエラー対策

React NativeのAndroid実機ビルドと出たエラー対処メモ #rnjapan

android SDKのインストール場所がわからないとき

adbコマンドが使えないとき

シミュレーターを起動したい状態で、下記コマンドを実行すると正常に進むと書かれている記事が多いがなかなか解決されない。

エミュレーターがオフラインになっていることが原因だと思われるので、修正方法

androidのエミュレーターが繋がらない場合の繋げ方

Android studioの公式サイト

iOSアプリ開発環境を整える

まずはXCODEをApp Storeからインストールしておきます。

そのあとreact-nativeのアプリのプロジェクトのディレクトリで以下のコマンドを実行します。そうするとシミュレーターが自動実行されます。

react-native

react-nativeのデモプロジェクトを実行してみます。

ビルドがサクセスすると下記のようなテキストが表示されます。

スクリーンショット 2017-12-08 17.59.18

まとめ

React nativeでとりあえずシミュレーターで起動するところまでをやってみました。Reduxも一緒に入れてみましたが、非常に開発しやすい環境ができましたね。

バージョンごとの干渉があるので、シミュレーターでエラーが出まくって大変でしたが、慣れてくると対応できるようになってきます。

npm install した時にシミュレーターでエラーが発生する場合は、一度シミュレーターを閉じてから再度下記を実行したりしてみると良いかもしれません。

こういうエラーメッセージが多発することがあります。

ライブラリをインストールする時にこの問題が起きます。

コマンドライン、ターミナルにもエラーメッセージが出てきますが、下記のgithubのURLにも問題の解決方法が書かれています。

https://github.com/facebook/react-native/issues/4968

React nativeやJavaScriptでアプリを開発していきたいという方こちらのスクールがオススメです!

Webcamp(ウェブキャンプ)proで転職。料金・口コミ・評判

この記事が気に入ったら
いいね!しよう

Rplayの最新情報をお届けします

TwitterでRplayをフォローする