プログラミング

React Nativeアプリでexpoを使わずにxcodeやAndroid Studioで開発する方法

今回はcreate-react-native-appを使ってreactアプリケーションを作ろうとした時に、デフォルトではexpoを用いた開発になるところを、xcodeやandroid Studioと行ったnativeの開発環境にも対応させるための方法について書きます。

[kanren postid=”812 827″]

何ができるようになるのか?

expoではなくxcodeやandroid Studioで開発を行えるようになることで、react-nativeでできることとして制限された開発から解放されます。例えば、iOSアプリのsplash画面はLaunch Screenと呼ばれるxcodeから編集するファイルで設定することができますが、react-nativeのJavaScriptでいじることはできません。

react-nativeをxcodeで開発できるようになると、このようなXcode上から編集できるファイルや、object-CやSwiftで記述するネイティブモジュールと呼ばれる本来react-nativeでは作れないような機能を取り入れることができます。

やってみる

それでは実際にexpoではなくxcodeやandroid Studioで開発を行えるようにする方法を紹介します。

eject

yarn eject

 

yarnでインストールを行っていた場合、このコマンドを実行することでcreate-react-appの方で自動管理されていたデフォルトの隠しファイルを編集できるようになります。コマンドを実行した後は、新たにiosディレクトリとandroidディレクトリができていると思います。

iOS

open ios/<app name>.xcodeproj

 

これでiosディレクトリのなかのxcodeプロジェクトファイルを開きます。xcodeがインストールされてるのであれば、Xcodeが自動的に立ち上がりプロジェクトのbuildが始まります。xcodeの左上でios somulatorが選択できるようになっているので、好きなものを選んで隣の三角の再生ボタンみたいなのを押します。するとiOS simulatorのbuildが始まってアプリを起動します。

この時、react-nativeのディレクトリでyarn startを行っていなかった場合、自動でターミナルが起動してyarn startが実行されます。typescriptを使用したい場合はtsc -wコマンドを同時に実行しなければいけないので、simulator起動時に自動でyarn startされたくない場合はあらかじめyarn startしておくのが良いと思います。

Android

まずはAndroid studioのアプリを起動します。プロジェクトを開く項目で、先ほどejectで出来たandroidディレクトリを指定すれば、プロジェクトを認識して操作が可能になります。

まとめ

create-react-native-appでxcodeやAndroid Studioを使うにはyarn ejectを行う。

 

ABOUT ME
gitackt
お金をかけないサバイバル術の記事を書きます。温泉と餃子が好きです。プログラミングが得意です。趣味はメルカリです。