React Native0.41

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

はじめに#

React Nativeへようこそ！React Nativeを導入するためのページです。すぐにアプリケーションを構築できます。 React Nativeが既にインストールされている場合は、 チュートリアルに進んでください。

導入方法は、開発オペレーティングシステムによって異なります。また、iOSまたはAndroid向けに開発を開始するかどうかでも異なります。 iOSとAndroidの両方で開発したいのであれば、それは問題ありません。ですが設定が少し異なるので、最初から選択する必要があります。

Mobile OS: iOS Android Development OS: macOS Linux Windows

サポートされていません#

残念ながら、MacでしかiOS用に開発することはできません。iOSアプリを構築したいがまだMacをお持ちでない場合は、Androidの手順から始めてみてください。

依存関係のインストール #

開発にはNode.js, Watchman, React Nativeコマンドラインインターフェース, Xcodeが必要です。

依存関係のインストール #

開発にはNode.js, Watchman, React Nativeコマンドラインインターフェース, Android Studioが必要です。

依存関係のインストール #

開発にはNode.js, Watchman, React Nativeコマンドラインインターフェース, Android Studioが必要です。

Node, Watchman #

Homebrewを使用してNodeおよびWatchmanをインストールすることをお勧めします。 Homebrewをインストールした後、ターミナルで次のコマンドを実行します。

brew install node brew install watchman

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

Node #

Follow the installation instructions for your Linux distribution to install Node.js 4 or newer.

Node #

We recommend installing Node.js and Python2 via Chocolatey, a popular package manager for Windows. Open a Command Prompt as Administrator, then run:

choco install nodejs.install choco install python2

You can find additional installation options on Node.js's Downloads page.

The React Native CLI #

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

ターミナルで次のコマンドを行します:

npm install -g react-native-cli

次のようなエラーが発生した場合、Cannot find module 'npmlog', npmを直接インストールしてください: curl -0 -L http://npmjs.org/install.sh | sudo sh.

The React Native CLI #

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

ターミナルで次のコマンドを行します:

npm install -g react-native-cli

次のようなエラーが発生した場合、Cannot find module 'npmlog', npmを直接インストールしてください: curl -0 -L http://npmjs.org/install.sh | sudo sh.

Xcode #

Xcodeをインストールする最も簡単な方法は、Mac App Store経由です。Xcodeをインストールすると、iOSシミュレータとiOSアプリを構築するのに必要なすべてのツールもインストールされます。

Android開発環境#

Android開発が初めての方にとって、開発環境の設定は面倒です。既にAndroid開発に精通している場合も、設定が必要な場合があります。いずれの場合も、次のステップに注意深く従ってください。

1. Android Studioをダウンロードしてインストールしてください#

Android Studioには、React Nativeアプリの実行とテストに必要なAndroid SDKとAVD(エミュレータ)が用意されています。

Android Studioには、Java SE Development Kit(JDK)バージョン8が必要です。ターミナルにjavac -versionを入力して、使用しているバージョンがある場合は確認できます。

$ javac -version javac 1.8.0_111

バージョン1.8.x_xxxはJDK 8に対応しています。

2. Install the AVD and HAXM #

Choose Custom installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

Then, click "Next" to install all of these components.

If you've already installed Android Studio before, you can still install HAXM without performing a custom installation.

2. Install the AVD and configure VM acceleration #

Choose Custom installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

Click "Next" to install all of these components, then configure VM acceleration on your system.

3. Install the Android 6.0 (Marshmallow) SDK #

Android Studio installs the most recent Android SDK by default. React Native, however, requires the Android 6.0 (Marshmallow) SDK. To install it, launch the SDK Manager, click on "Configure" in the "Welcome to Android Studio" screen.

The SDK Manager can also be found within the Android Studio "Preferences" menu, under Appearance & Behavior → System Settings → Android SDK.

Select "SDK Platforms" from within the SDK Manager, then check the box next to "Show Package Details". Look for and expand the Android 6.0 (Marshmallow) entry, then make sure the following items are all checked:

  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Next, select "SDK Tools" and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build Tools" entry, then make sure that Android SDK Build-Tools 23.0.1 is selected.

Finally, click "Apply" to download and install the Android SDK and related build tools.

4. Set up the ANDROID_HOME environment variable #

The React Native command line interface requires the ANDROID_HOME environment variable to be set up.

Add the following lines to your ~/.bashrc (or equivalent) config file:

export ANDROID_HOME=${HOME}/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Please make sure you export the correct path for ANDROID_HOME. If you installed the Android SDK using Homebrew, it would be located at /usr/local/opt/android-sdk.

Add the following lines to your ~/.bashrc (or equivalent) config file:

export ANDROID_HOME=${HOME}/Android/Sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Please make sure you export the correct path for ANDROID_HOME if you did not install the Android SDK using Android Studio.

Go to Control Panel → System and Security → System → Change settings → Advanced System Settings → Environment variables → New, then enter the path to your Android SDK.

env variable

Restart the Command Prompt to apply the new environment variable.

Please make sure you export the correct path for ANDROID_HOME if you did not install the Android SDK using Android Studio.

Watchman (optional) #

Follow the Watchman installation guide to compile and install Watchman from source.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance, but it's alright to skip this if you find the process to be tedious.

Starting the Android Virtual Device #

Android Studio AVD Manager

You can see the list of available AVDs by opening the "AVD Manager" from within Android Studio. You can also run the following command in a terminal:

android avd

Once in the "AVD Manager", select your AVD and click "Start...".

Android Studio should have set up an Android Virtual Device for you during installation, but it is very common to run into an issue where Android Studio fails to install the AVD. You may follow the Android Studio User Guide to create a new AVD manually if needed.

React Nativeインストールの確認#

React Nativeコマンドラインインターフェイスを使用して、"AwesomeProject"プロジェクトを生成します。新しく作成されたフォルダ内で、react-native run-iosを実行します:

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

iOSシミュレータで新しいアプリが実行されるはずです。

react-native run-iosはアプリを実行する方法のひとつです。Xcodeまたは、Nuclideから直接実行することも可能です。

React Nativeコマンドラインインターフェイスを使用して、"AwesomeProject"プロジェクトを生成します。新しく作成されたフォルダ内で、react-native run-androidを実行します:

react-native init AwesomeProject cd AwesomeProject react-native run-android

If everything is set up correctly, you should see your new app running in your AVD shortly.

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

アプリの変更#

アプリを正常に実行できました。つぎは修正しましょう。

  • index.ios.jsを開いて、テキストエディタでいくつかの行を編集しましょう。
  • Command⌘ + Rを押して、アプリをリロードし、変更を確認してください。
  • Open index.android.jsを開いて、テキストエディタでいくつかの行を編集しましょう。
  • Press the R key twice or select Reload from the Developer Menu to see your change!

おしまい！#

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

Testing your React Native Installation #

Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native start inside the newly created folder to start the packager.

react-native init AwesomeProject cd AwesomeProject react-native start

Open a new command prompt and run react-native run-android inside the same folder to launch the app on your AVD.

react-native run-android

Testing your React Native Installation #

Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder.

react-native init AwesomeProject cd AwesomeProject react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

If you're targeting API level 23, the app might crash on first launch with an error smilar to Unable to add window android.view.ViewRootImpl$W@c51fa6 -- permission denied for this window type. To fix this, you need to go to System settings > Apps > Configure apps > Draw over other apps and grant the permission for the app.

NOTE: Many React Native modules haven't been tested on Marshmallow and might break. Please thoroughly test the app if you target API level 23 and file a bug report if you find that something is broken.

アプリの変更#

Now that you have successfully run the app, let's modify it.

  • Open index.android.js in your text editor of choice and edit some lines.
  • Press the R key twice or select Reload from the Developer Menu to see your change!

That's it! #

Congratulations! You've successfully run and modified a React Native app.

つぎは？#

  • この新しいReactネイティブコードを既存のアプリケーションに追加する場合は、Integrationガイドを参照してください。

  • もし動作させることができない場合は、トラブルシューティングのページを参照してください。

  • React Nativeについてもっと知りたい人は、 チュートリアルを続けてください。

つぎは？#

  • この新しいReactネイティブコードを既存のアプリケーションに追加する場合は、Integrationガイドを参照してください。

  • もし動作させることができない場合は、トラブルシューティングのページを参照してください。

  • React Nativeについてもっと知りたい人は、 チュートリアルを続けてください。

次に進む →

上記のコンテンツをGitHubで編集し、プルリクエストを送ることができます！