react-native チュートリアル
反応ネイティブの使い方

備考

Mac用セットアップ

パッケージマネージャーのインストールHomebrew brew

ターミナルプロンプトに貼り付けます。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Xcode IDEのインストール

下のリンクを使ってダウンロードするか、Mac App Storeで見つけてください

https://developer.apple.com/download/

注： Xcode.beta.appがプロダクションバージョンのXcode.appとともにインストールされている場合は、プロダクションバージョンのxcodebuildツールを使用していることを確認してください。次のように設定することができます：

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Android環境のインストール

• git

  * XCodeをインストールしている場合、Gitは既にインストールされており、そうでない場合は以下を実行します

  brew install git 
  

• 最新のJDK

• Androidスタジオ

  カスタムインストールを選択する

  

  パフォーマンスとAndroid仮想デバイスの両方を選択する

  

  インストール後、Android Studioのようこそウィンドウから「設定」 - >「SDKマネージャー」を選択します。

  

  SDK PlatformsウィンドウでPackage Detailsを表示し、Android 6.0（Marshmallow）の下でGoogle API、Intel x86 Atomシステムイメージ、Intel x86 Atom_64システムイメージ、Google API Intel x86 Atom_64システムイメージが選択されていることを確認します。

  

  [SDKツール]ウィンドウで[パッケージの詳細を表示]を選択し、Android SDKの[ビルドツール]の下で、Android SDKのビルドツール23.0.1が選択されていることを確認します。

  

• 環境変数ANDROID_HOME

  ANDROID_HOME環境変数が既存のAndroid SDKを指していることを確認します。これを行うには、〜/ .bashrc、〜/ .bash_profile（またはあなたのシェルが使用するもの）にこれを追加して、ターミナルを再度開きます：

  Android StudioなしでSDKをインストールした場合、次のようになります。/ usr / local / opt / android-sdk

  export ANDROID_HOME=~/Library/Android/sdk
  

Macの依存関係

Android、node.js、React Nativeコマンドラインツール、Watchmanには、iOS用のXcodeとAndroidスタジオが必要です。

Homebrew経由でノードとウォッチマンをインストールすることをお勧めします。

brew install node
brew install watchman

Watchmanは、ファイルシステムの変更を監視するためのFacebookのツールです。より良いパフォーマンスを得るためにインストールすることを強くお勧めします。オプションです。

Nodeにはnpmが付属しており、React Nativeコマンドラインインターフェイスをインストールできます。

npm install -g react-native-cli

許可エラーが発生した場合は、sudoを試してみてください：

sudo npm install -g react-native-cli.

iOSの場合、Xcodeをインストールする最も簡単な方法はMac App Store経由です。アンドロイドはAndroid Studioをダウンロードしてインストールします。

Javaコードを変更する予定の場合は、Gradle Daemonを使用してビルドを高速化することをお勧めします。

あなたのリアクションのネイティブインストールをテストする

React Nativeコマンドラインツールを使用して、 "AwesomeProject"と呼ばれる新しいReact Nativeプロジェクトを生成し、新しく作成したフォルダの中にreact-native run-iosを実行します。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

まもなくiOS Simulatorで新しいアプリが実行されるはずです。 XcodeやNuclideの中から直接実行することもできます。

アプリの変更

これでアプリケーションを正常に実行したので、修正しましょう。

• 選択したテキストエディタでindex.ios.jsまたはindex.android.jsを開き、いくつかの行を編集します。
• あなたのiOSシミュレータでCommand⌘+ Rを押して、アプリをリロードして変更を確認してください！それでおしまい！

おめでとう！あなたは正常に最初のReact Nativeアプリを実行して修正しました。

_{source： 入門 - リアクションネイティブ}

Windowsのセットアップ

注：Windows上でiOS用の反応ネイティブアプリを開発することはできません。反応のネイティブAndroidアプリのみが反応します。

Windows上の反応ネイティブの公式のセットアップ文書は、 ここで見つけることができます 。詳細が必要な場合は、 細かいガイドがあります 。

ツール/環境

• ウィンドウズ10
• コマンドラインツール（Powershellやwindowsコマンドラインなど）
• Chocolatey （ PowerShell経由でセットアップする手順 ）
• JDK（バージョン8）
• Androidスタジオ
• HAXM用に有効化された仮想化テクノロジを備えたIntelマシン（オプション、エミュレータを使用する場合のみ必要）

1）反応のネイティブ開発のためにマシンをセットアップする

コマンドラインを管理者として起動し、次のコマンドを実行します。

choco install nodejs.install
choco install python2

npmを実行できるようにコマンドラインを管理者として再起動してください

npm install -g react-native-cli

最後のコマンドを実行した後、react-nativeがインストールされていたディレクトリをコピーします。これはステップ4に必要です。2つのコンピュータでこれを試しましたC:\Program Files (x86)\Nodist\v-x64\6.2.2 。もう1つはC:\Users\admin\AppData\Roaming\npm

2）環境変数を設定する

このセクションでは、画像によるステップバイステップガイドがここにあります。

次の場所に移動して環境変数ウィンドウを開きます。

[右クリック] "スタート"メニュー - >システム - >システム設定 - >環境変数

一番下のセクションで、「Path」システム変数を見つけ、手順1でreact-nativeがインストールされている場所を追加します。

ANDROID_HOME環境変数を追加していない場合は、ここでもそれを行う必要があります。 「環境変数」ウィンドウで、「ANDROID_HOME」という名前の新しいシステム変数を追加し、android sdkのパスとして値を追加します。

その後、コマンドラインを管理者として再起動して、反応ネイティブコマンドを実行することができます。

3）プロジェクトを作成するコマンドラインでプロジェクトを配置するフォルダに移動し、次のコマンドを実行します。

react-native init ProjectName

4）プロジェクトを実行するアンドロイドスタジオからエミュレータを起動するコマンドラインでプロジェクトのルートディレクトリに移動して実行します：

cd ProjectName
react-native run-android

依存関係の問題が発生する可能性があります。たとえば、正しいビルドツールのバージョンがないというエラーが発生することがあります。これを修正するには、Android Studioでsdkマネージャを開き、そこからビルドツールをダウンロードする必要があります。

おめでとう！

UIをリフレッシュするには、エミュレータとアプリケーションの実行中にrキーを2回押します。開発者のオプションを表示するには、 ctrl + m押します。

Linux（Ubuntu）のセットアップ

1）セットアップNode.JS

ターミナルを起動し、次のコマンドを実行してnodeJSをインストールします。

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

ノードコマンドが利用できない場合

sudo ln -s /usr/bin/nodejs /usr/bin/node

代替案NodeJS instalations：

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

または

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

現在のバージョンがあるかどうかを確認する

node -v 

npmを実行して反応ネイティブをインストールする

sudo npm install -g react-native-cli

2）Javaの設定

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3）Android Studioのセットアップ：

Android SDKまたはAndroid Studio

http://developer.android.com/sdk/index.html

Android SDK e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4）セットアップエミュレータ：

ターミナルでコマンドを実行する

android

SDKマネージャ内から「SDKプラットフォーム」を選択すると、「Android 7.0（Nougat）」の横に青のチェックマークが表示されます。そうでない場合は、チェックボックスをクリックしてから「適用」をクリックします。

5）プロジェクトを開始する

アプリケーションinitの例

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs： android/app/build.gradleバージョンがAndroid SDKにダウンロードされているBuild Toolsと同じかどうか常に確認してください

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6）プロジェクトを実行する

AndroidのAVDを開き、仮想アンドロイドを設定します。コマンドラインを実行します。

android avd

指示に従って仮想デバイスを作成し、起動します

別の端末を開き、コマンドラインを実行します。

react-native run-android
react-native start