LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.

More than 3 years have passed since last update.

posted at

react native でhello worldまで

はじめに

react nativeってどんなんだろう??
ちょっとスマホアプリ作ってみたいしなーって思ったが吉日、インストールをして、Helloworldまでいってみました!
ただ、自分が躓いた所を主に書いているので参考になる人が少ないかも知れません。。。

環境

・Mac OS Mojave
・Genymotion 2.12.2
・node v11.1.1
・watchman v4.9.0
・Virtual box v5.2.22
・Xcode 10B61

セットアップ

他のみなさまがたくさん良い書いているので、書いてなかったことだけ。

genymotionの個人無償版のダウンロードの場所が、ちょっと分かりづらくなってます。
Help>GenymotuinDesktop>fun-zone から落とせますのでご注意あれ
https://www.genymotion.com/fun-zone/

作成方法

  1. コンソールでまずは好きなディレクトリまで移動する
  2. react-native init hello-worldでプロジェクトファイルを作成する
  3. 所定のところに次のファイル・ディレクトリができる

スクリーンショット 2018-12-02 16.38.31.png

ビルド方法

iOS

次のコマンドだけでエミュレータまで起動する。
'react-native run-ios'

Android

  1. Genymotionでなんらかのエミュレータを起動する
  2. コンソールで 'react-native run-android' を実行する

Androdのビルド中にエラーが出るとき

たとえば

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

というエラーの場合、まず
adb をコンソールで打ってみる
もし、adb: command not found!と返ってきた場合、おそらくandroid sdk にパスが通ってない可能性が高いので、まずは初期セットアップを確認しましょう。
→ 特に次の環境変数を入れ忘れていることがあるのでチェックしましょう。

.bash_profile
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

adb devicesをコンソールに入力してみる
もし、List of devices attachedで、他に何も出てこなければ、単純にエミュレータを起動してない 可能性が高いです。
基本的にandroidの場合はiosのように自動でエミュレータは起動しません。
エミュレータを予め起動しておく必要があるので、起動しておきましょう!
→Genymotionを起動して、エミュレータを起動しましょう!

最後に

めっちゃ簡単。。。マジか!と思うほど。

node.jsなので、packageも突っ込みたいように突っ込めるので
ありがたいですね!
ちょっともう少し掘り下げて勉強します。。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up