Skip to content

Instantly share code, notes, and snippets.

@kentaro-m
Last active March 18, 2017 07:09
Show Gist options
  • Save kentaro-m/a4055603c06a5419542d20fda1e35aa4 to your computer and use it in GitHub Desktop.
Save kentaro-m/a4055603c06a5419542d20fda1e35aa4 to your computer and use it in GitHub Desktop.

React Native Sample

React NativeでiOSサンプルアプリケーションを起動するまでを試す。

始め方

$ brew update
$ brew watchman

Facebook開発のファイル監視サービス「Watchhman」をインストールする。

$ npm install -g react-native-cli

React NativeのCLIツールをインストールする。

$ react-native init ReactNativeSample
This will walk you through creating a new React Native project in /Users/Kentaro/Develop/github/ReactNativeSample
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
<依存パッケージのインストール...>
npm WARN react-native@0.42.2 requires a peer of react@~15.4.1 but none was installed.
Setting up new React Native app in /Users/Kentaro/Develop/github/ReactNativeSample
Installing React...
<依存パッケージのインストール...>

To run your app on iOS:
   cd /Users/Kentaro/Develop/github/ReactNativeSample
   react-native run-ios
   - or -
   Open ios/ReactNativeSample.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/Kentaro/Develop/github/ReactNativeSample
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

react-nativeコマンドを使用し、プロジェクトを新規作成する。プロジェクト名は英数字のみ使える(スネークケースでハイフンを入れるとエラーが出た)

$ cd ReactNativeSample/
$ react-native run-ios

ビルドを行い、しばらく待つとiOSシミュレータでサンプルアプリケーションが起動する。

コードの修正

index.ios.jsを修正し、iOSシミュレータでCtrl+Rを叩くと、変更が反映される。

デバッグツールの表示

iOSシミュレータでCtrl+Dを叩くと、デバッグツールの表示設定が出てくる。

Chrome Developer Toolsでデバッグ

デバッグツールの選択画面からDebug JS Remotelyを押すと、Chromeが立ち上がる。Developer Toolを開くとデバッグできる。

エラーが起きると...

画面が真っ赤に!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment