Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

react native でhello worldまで

Posted at

#はじめに
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も突っ込みたいように突っ込めるので
ありがたいですね!
ちょっともう少し掘り下げて勉強します。。。

0

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
  3. You can use dark theme
What you can do with signing up

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?