mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-24 04:16:00 +08:00
Revert "Refactor getting started navigation and information based on platform"
This reverts commit 0ea020d823.
fb-gh-sync-id: f46c4a1f927128fd34c2f8ce4be4c275468f2355
fbshipit-source-id: f46c4a1f927128fd34c2f8ce4be4c275468f2355
This commit is contained in:
Joel Marcey
@@ -4,796 +4,71 @@ title: Getting Started
|
||||
layout: docs
|
||||
category: Quick Start
|
||||
permalink: docs/getting-started.html
|
||||
next: tutorial
|
||||
next: getting-started-linux
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
<div class="toggler">
|
||||
<style>
|
||||
.toggler a {
|
||||
display: inline-block;
|
||||
padding: 10px 5px;
|
||||
margin: 2px;
|
||||
border: 1px solid #05A5D1;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.display-os-mac .toggler .button-mac,
|
||||
.display-os-linux .toggler .button-linux,
|
||||
.display-os-windows .toggler .button-windows,
|
||||
.display-platform-ios .toggler .button-ios,
|
||||
.display-platform-android .toggler .button-android {
|
||||
background-color: #05A5D1;
|
||||
color: white;
|
||||
}
|
||||
block { display: none; }
|
||||
.display-platform-ios.display-os-mac .ios.mac,
|
||||
.display-platform-ios.display-os-linux .ios.linux,
|
||||
.display-platform-ios.display-os-windows .ios.windows,
|
||||
.display-platform-android.display-os-mac .android.mac,
|
||||
.display-platform-android.display-os-linux .android.linux,
|
||||
.display-platform-android.display-os-windows .android.windows {
|
||||
display: block;
|
||||
}</style>
|
||||
<span>Platform:</span>
|
||||
<a href="" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
<span>OS:</span>
|
||||
<a href="" class="button-mac" onclick="display('os', 'mac')">Mac</a>
|
||||
<a href="" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||
<a href="" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||
</div>
|
||||
1. OS X - This guide assumes OS X which is needed for iOS development.
|
||||
2. [Homebrew](http://brew.sh/) is the recommended way to install Watchman and Flow.
|
||||
3. Install [Node.js](https://nodejs.org/) 4.0 or newer.
|
||||
- Install **nvm** with [its setup instructions here](https://github.com/creationix/nvm#installation). Then run `nvm install node && nvm alias default node`, which installs the latest version of Node.js and sets up your terminal so you can run it by typing `node`. With nvm you can install multiple versions of Node.js and easily switch between them.
|
||||
- New to [npm](https://docs.npmjs.com/)?
|
||||
4. `brew install watchman`. We recommend installing [watchman](https://facebook.github.io/watchman/docs/install.html), otherwise you might hit a node file watching bug.
|
||||
5. `brew install flow`, if you want to use [flow](http://www.flowtype.org).
|
||||
|
||||
<!-- ######### LINUX AND WINDOWS for iOS ##################### -->
|
||||
We recommend periodically running `brew update && brew upgrade` to keep your programs up-to-date.
|
||||
|
||||
<block class="linux windows ios" />
|
||||
## iOS Setup
|
||||
|
||||
## Unsupported
|
||||
[Xcode](https://developer.apple.com/xcode/downloads/) 7.0 or higher is required. It can be installed from the App Store.
|
||||
|
||||
<div>Unfortunately, Apple only lets you develop for iOS on a Mac machine. Please check out the <a href="" onclick="display('platform', 'android')">Android</a> instructions instead.</div>
|
||||
## Android Setup
|
||||
|
||||
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xaf1/t39.1997-6/851591_233289256829505_447005964_n.png" width="150"></img></center>
|
||||
To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See [Android setup guide](docs/android-setup.html) for instructions on how to set up your Android environment.
|
||||
|
||||
<!-- ######### MAC for iOS ##################### -->
|
||||
_NOTE:_ There is experimental [Windows and Linux support](docs/linux-windows-support.html) for Android development.
|
||||
|
||||
<block class="mac ios android" />
|
||||
## Quick start
|
||||
|
||||
## Installation
|
||||
Install the React Native command line tools:
|
||||
|
||||
### Required Prerequisites
|
||||
$ npm install -g react-native-cli
|
||||
|
||||
#### Homebrew
|
||||
__NOTE__: If you see the error, `EACCES: permission denied`, please run the command: `sudo npm install -g react-native-cli`.
|
||||
|
||||
[Homebrew](http://brew.sh/), in order to install the required NodeJS, in addition to some
|
||||
recommended installs.
|
||||
Create a React Native project:
|
||||
|
||||
```
|
||||
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
|
||||
```
|
||||
$ react-native init AwesomeProject
|
||||
|
||||
> We recommend periodically running `brew update && brew upgrade` to keep your programs up-to-date.
|
||||
|
||||
#### Node
|
||||
**To run the iOS app:**
|
||||
|
||||
Use Homebrew to install [Node.js](https://nodejs.org/).
|
||||
|
||||
> NodeJS 4.0 or greater is required for React Native. The default Homebrew package for Node is
|
||||
> currently 6.0, so that is not an issue.
|
||||
|
||||
```
|
||||
brew install node
|
||||
```
|
||||
|
||||
#### React Native Command Line Tools
|
||||
|
||||
The React Native command line tools allow you to easily create and initialize projects, etc.
|
||||
|
||||
```
|
||||
npm install -g react-native-cli
|
||||
```
|
||||
|
||||
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||
> `sudo npm install -g react-native-cli`.
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
#### XCode
|
||||
|
||||
[Xcode](https://developer.apple.com/xcode/downloads/) 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install `git` as well.
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
#### Android Studio
|
||||
|
||||
[Android Studio](http://developer.android.com/sdk/index.html) 2.0 or higher. This will provide you
|
||||
the Android SDK and emulator required to run and test your React Native apps.
|
||||
|
||||
> Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
|
||||
> `javac -version` to see what version you have, if any. If you do not meet the JDK requirement,
|
||||
> you can
|
||||
> [download it](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
|
||||
|
||||
You will need to customize your installation:
|
||||
|
||||
- Choose a `Custom` installation
|
||||
|
||||
|
||||
|
||||
- Choose both `Performance` and `Android Virtual Device`
|
||||
|
||||
|
||||
|
||||
- After installation, choose `Configure | SDK Manager` from the Android Studio welcome window.
|
||||
|
||||
|
||||
|
||||
- In the `SDK Platforms` window, choose `Show Package Details` and under `Android 6.0 (Marshmallow)`, make sure that `Google APIs`, `Intel x86 Atom System Image`, `Intel x86 Atom_64 System Image`, and `Google APIs Intel x86 Atom_64 System Image` are checked.
|
||||
|
||||
|
||||
|
||||
- In the `SDK Tools` window, choose `Show Package Details` and under `Android SDK Build Tools`, make sure that `Android SDK Build-Tools 23.0.1` is selected.
|
||||
|
||||
|
||||
|
||||
#### ANDROID_HOME Environment Variable
|
||||
|
||||
Ensure the `ANDROID_HOME` environment variable points to your existing Android SDK. To do that, add
|
||||
this to your `~/.bashrc`, `~/.bash_profile` (or whatever your shell uses) and re-open your terminal:
|
||||
|
||||
```
|
||||
# If you installed the SDK without Android Studio, then it may be something like:
|
||||
# /usr/local/opt/android-sdk
|
||||
export ANDROID_HOME=~/Library/Android/sdk
|
||||
```
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
### Highly Recommended Installs
|
||||
|
||||
#### Watchman
|
||||
|
||||
[Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching
|
||||
changes in the filesystem. It is recommended you install it for better performance.
|
||||
|
||||
```
|
||||
brew install watchman
|
||||
```
|
||||
|
||||
#### Flow
|
||||
|
||||
[Flow](http://www.flowtype.org), for static typechecking of your React Native code (when using
|
||||
Flow as part of your codebase).
|
||||
|
||||
|
||||
```
|
||||
brew install flow
|
||||
```
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
#### Add Android Tools Directory to your `PATH`
|
||||
|
||||
You can add the Android tools directory on your `PATH` in case you need to run any of the Android
|
||||
tools from the command line such as `android avd`. In your `~/.bash` or `~/.bash_profile`:
|
||||
|
||||
```
|
||||
# Your exact string here may be different.
|
||||
PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}"
|
||||
export PATH
|
||||
```
|
||||
|
||||
#### Gradle Daemon
|
||||
|
||||
Enable [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which greatly improves incremental build times for changes in java code.
|
||||
|
||||
### Other Optional Installs
|
||||
|
||||
#### Git
|
||||
|
||||
Git version control. If you have installed [XCode](https://developer.apple.com/xcode/), Git is
|
||||
already installed, otherwise run the following:
|
||||
|
||||
```
|
||||
brew install git
|
||||
```
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
#### Nuclide
|
||||
|
||||
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing,
|
||||
[running](http://nuclide.io/docs/platforms/react-native/#running-applications) and
|
||||
[debugging](http://nuclide.io/docs/platforms/react-native/#debugging)
|
||||
[React Native](http://nuclide.io/docs/platforms/react-native/) applications.
|
||||
|
||||
Get started with Nuclide [here](http://nuclide.io/docs/quick-start/getting-started/).
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
#### Genymotion
|
||||
|
||||
Genymotion is an alternative to the stock Google emulator that comes with Android Studio.
|
||||
However, it's only free for personal use. If you want to use the stock Google emulator, see below.
|
||||
|
||||
1. Download and install [Genymotion](https://www.genymotion.com/).
|
||||
2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
|
||||
3. Create a new emulator and start it.
|
||||
4. To bring up the developer menu press ⌘+M
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
#### Virtual Device Not Created When Installing Android Studio
|
||||
|
||||
There is a [known bug](https://code.google.com/p/android/issues/detail?id=207563) on some versions
|
||||
of Android Studio where a virtual device will not be created, even though you selected it in the
|
||||
installation sequence. You may see this at the end of the installation:
|
||||
|
||||
```
|
||||
Creating Android virtual device
|
||||
Unable to create a virtual device: Unable to create Android virtual device
|
||||
```
|
||||
|
||||
If you see this, run `android avd` and create the virtual device manually.
|
||||
|
||||
|
||||
|
||||
Then select the new device in the AVD Manager window and click `Start...`.
|
||||
|
||||
#### Shell Command Unresponsive Exception
|
||||
|
||||
If you encounter:
|
||||
|
||||
```
|
||||
Execution failed for task ':app:installDebug'.
|
||||
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
|
||||
```
|
||||
|
||||
try downgrading your Gradle version to 1.2.3 in `<project-name>/android/build.gradle` (https://github.com/facebook/react-native/issues/2720)
|
||||
|
||||
|
||||
<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
## Installation
|
||||
|
||||
### Required Prerequisites
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
#### Chocolatey
|
||||
|
||||
[Chocolatey](https://chocolatey.org) is a package manager for Windows similar to `yum` and
|
||||
`apt-get`. See the [website](https://chocolatey.org) for updated instructions, but installing from
|
||||
the Terminal should be something like:
|
||||
|
||||
```
|
||||
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
|
||||
```
|
||||
|
||||
> Normally when you run Chocolatey to install a package, you should run your Terminal as
|
||||
> Administrator.
|
||||
|
||||
#### Python 2
|
||||
|
||||
Fire up the Termimal and use Chocolatey to install Python 2.
|
||||
|
||||
> Python 3 will currently not work when initializing a React Native project.
|
||||
|
||||
```
|
||||
choco install python2
|
||||
```
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
#### Node
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
Fire up the Terminal and type the following commands to install NodeJS from the NodeSource
|
||||
repository:
|
||||
|
||||
```
|
||||
sudo apt-get install -y build-essential
|
||||
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
sudo ln -s /usr/bin/nodejs /usr/bin/node
|
||||
```
|
||||
|
||||
<block class='windows android' />
|
||||
|
||||
Fire up the Termimal and use Chocolatey to install NodeJS.
|
||||
|
||||
```
|
||||
choco install nodejs.install
|
||||
```
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### React Native Command Line Tools
|
||||
|
||||
The React Native command line tools allow you to easily create and initialize projects, etc.
|
||||
|
||||
```
|
||||
npm install -g react-native-cli
|
||||
```
|
||||
|
||||
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||
> `sudo npm install -g react-native-cli`.
|
||||
|
||||
#### Android Studio
|
||||
|
||||
[Android Studio](http://developer.android.com/sdk/index.html) 2.0 or higher. This will provide you
|
||||
the Android SDK and emulator required to run and test your React Native apps.
|
||||
|
||||
> Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
|
||||
> `javac -version` to see what version you have, if any. If you do not meet the JDK requirement,
|
||||
> you can
|
||||
> [download it](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html),
|
||||
> or use a pacakage manager to install it (e.g. `choco install jdk8`,
|
||||
> `apt-get install default-jdk`).
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
You will need to customize your installation:
|
||||
|
||||
- Choose a `Custom` installation
|
||||
|
||||
|
||||
|
||||
- Choose `Android Virtual Device`
|
||||
|
||||
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
- Make sure all components are checked for the install, particularly the `Android SDK` and `Android Device Emulator`.
|
||||
|
||||
- After the initial install, choose a `Custom` installation.
|
||||
|
||||
|
||||
|
||||
- Verify installed components, particularly the emulator and the HAXM accelerator. They should be checked.
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
- After installation, choose `Configure | SDK Manager` from the Android Studio welcome window.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
- In the `SDK Platforms` window, choose `Show Package Details` and under `Android 6.0 (Marshmallow)`, make sure that `Google APIs`, `Intel x86 Atom System Image`, `Intel x86 Atom_64 System Image`, and `Google APIs Intel x86 Atom_64 System Image` are checked.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
- In the `SDK Tools` window, choose `Show Package Details` and under `Android SDK Build Tools`, make sure that `Android SDK Build-Tools 23.0.1` is selected.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### ANDROID_HOME Environment Variable
|
||||
|
||||
Ensure the `ANDROID_HOME` environment variable points to your existing Android SDK.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
To do that, add this to your `~/.bashrc`, `~/.bash_profile` (or whatever your shell uses) and
|
||||
re-open your terminal:
|
||||
|
||||
```
|
||||
# If you installed the SDK without Android Studio, then it may be something like:
|
||||
# /usr/local/opt/android-sdk; Generally with Android Studio, the SDK is installed here...
|
||||
export ANDROID_HOME=~/Android/Sdk
|
||||
```
|
||||
|
||||
> You need to restart the Terminal to apply the new environment variables (or `source` the relevant
|
||||
> bash file).
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
Go to `Control Panel` -> `System and Security` -> `System` -> `Change settings` ->
|
||||
`Advanced System Settings` -> `Environment variables` -> `New`
|
||||
|
||||
> Your path to the SDK will vary to the one shown below.
|
||||
|
||||
|
||||
|
||||
> You need to restart the Command Prompt (Windows) to apply the new environment variables.
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
### Highly Recommended Installs
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
#### Watchman
|
||||
|
||||
Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install
|
||||
it for better performance.
|
||||
|
||||
> This also helps avoid a node file-watching bug.
|
||||
|
||||
Type the following into your terminal to compile watchman from source and install it:
|
||||
|
||||
```
|
||||
git clone https://github.com/facebook/watchman.git
|
||||
cd watchman
|
||||
git checkout v4.5.0 # the latest stable release
|
||||
./autogen.sh
|
||||
./configure
|
||||
make
|
||||
sudo make install
|
||||
```
|
||||
|
||||
#### Flow
|
||||
|
||||
[Flow](http://www.flowtype.org), for static typechecking of your React Native code (when using
|
||||
Flow as part of your codebase).
|
||||
|
||||
Type the following in the terminal:
|
||||
|
||||
```
|
||||
npm install -g flow-bin
|
||||
```
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### Gradle Daemon
|
||||
|
||||
Enable [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which greatly
|
||||
improves incremental build times for changes in java code.
|
||||
|
||||
<block class="mac linux android" />
|
||||
|
||||
```
|
||||
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
|
||||
```
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
```
|
||||
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
|
||||
```
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
#### Android Emulator Accelerator
|
||||
|
||||
You may have seen the following screen when installing Android Studio.
|
||||
|
||||
|
||||
|
||||
If your system supports KVM, you should install the
|
||||
[Intel Android Emulator Accelerator](https://software.intel.com/en-us/android/articles/speeding-up-the-android-emulator-on-intel-architecture#_Toc358213272).
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
#### Add Android Tools Directory to your `PATH`
|
||||
|
||||
You can add the Android tools directory on your `PATH` in case you need to run any of the Android
|
||||
tools from the command line such as `android avd`.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
In your `~/.bash` or `~/.bash_profile`:
|
||||
|
||||
```
|
||||
# Your exact string here may be different.
|
||||
PATH="~/Android/Sdk/tools:~/Android/Sdk/platform-tools:${PATH}"
|
||||
export PATH
|
||||
```
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
Go to `Control Panel` -> `System and Security` -> `System` -> `Change settings` ->
|
||||
`Advanced System Settings` -> `Environment variables` -> highlight `PATH` -> `Edit...`
|
||||
|
||||
> The location of your Android tools directories will vary.
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
### Other Optional Installs
|
||||
|
||||
#### Git
|
||||
|
||||
<block class="linux android">
|
||||
|
||||
Install Git [via your package manager](https://git-scm.com/download/linux)
|
||||
(e.g., `sudo apt-get install git-all`).
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
You can use Chocolatey to install `git` via:
|
||||
|
||||
```
|
||||
choco install git
|
||||
```
|
||||
|
||||
Alternatively, you can download and install [Git for Windows](https://git-for-windows.github.io/).
|
||||
During the setup process, choose "Run Git from Windows Command Prompt", which will add `git` to your
|
||||
`PATH` environment variable.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
#### Nuclide
|
||||
|
||||
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing,
|
||||
[running](http://nuclide.io/docs/platforms/react-native/#running-applications) and
|
||||
[debugging](http://nuclide.io/docs/platforms/react-native/#debugging)
|
||||
[React Native](http://nuclide.io/docs/platforms/react-native/) applications.
|
||||
|
||||
Get started with Nuclide [here](http://nuclide.io/docs/quick-start/getting-started/).
|
||||
|
||||
<block class="linux windows android" />
|
||||
|
||||
#### Genymotion
|
||||
|
||||
Genymotion is an alternative to the stock Google emulator that comes with Android Studio.
|
||||
However, it's only free for personal use. If you want to use the stock Google emulator, see below.
|
||||
|
||||
1. Download and install [Genymotion](https://www.genymotion.com/).
|
||||
2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
|
||||
3. Create a new emulator and start it.
|
||||
4. To bring up the developer menu press ⌘+M
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
#### Visual Studio Emulator for Android
|
||||
|
||||
The [Visual Studio Emulator for Android](https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx)
|
||||
is a free android emulator that is hardware accelerated via Hyper-V. It is an alternative to the
|
||||
stock Google emulator that comes with Android Studio. It doesn't require you to install Visual
|
||||
Studio at all.
|
||||
|
||||
To use it with react-native you just have to add a key and value to your registry:
|
||||
|
||||
1. Open the Run Command (Windows+R)
|
||||
2. Enter `regedit.exe`
|
||||
3. In the Registry Editor navigate to `HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools`
|
||||
4. Right Click on `Android SDK Tools` and choose `New > String Value`
|
||||
5. Set the name to `Path`
|
||||
6. Double Click the new `Path` Key and set the value to `C:\Program Files\Android\sdk`. The path value might be different on your machine.
|
||||
|
||||
You will also need to run the command `adb reverse tcp:8081 tcp:8081` with this emulator.
|
||||
|
||||
Then restart the emulator and when it runs you can just do `react-native run-android` as usual.
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
#### Unable to run mksdcard SDK Tool
|
||||
|
||||
When installing Android Studio, if you get the error:
|
||||
|
||||
```
|
||||
Unable to run mksdcard SDK tool
|
||||
```
|
||||
|
||||
then install the standard C++ library:
|
||||
|
||||
```
|
||||
sudo apt-get install lib32stdc++6
|
||||
```
|
||||
|
||||
#### Virtual Device Not Created When Installing Android Studio
|
||||
|
||||
There is a [known bug](https://code.google.com/p/android/issues/detail?id=207563) on some versions
|
||||
of Android Studio where a virtual device will not be created, even though you selected it in the
|
||||
installation sequence. You may see this at the end of the installation:
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
```
|
||||
Creating Android virtual device
|
||||
Unable to create a virtual device: Unable to create Android virtual device
|
||||
```
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
If you see this, run `android avd` and create the virtual device manually.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
Then select the new device in the AVD Manager window and click `Start...`.
|
||||
|
||||
<block class="linux android" />
|
||||
|
||||
#### Shell Command Unresponsive Exception
|
||||
|
||||
In case you encounter
|
||||
|
||||
```
|
||||
Execution failed for task ':app:installDebug'.
|
||||
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
|
||||
```
|
||||
|
||||
try downgrading your Gradle version to 1.2.3 in `<project-name>/android/build.gradle` (https://github.com/facebook/react-native/issues/2720)
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
## Testing Installation
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
```
|
||||
react-native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react-native run-ios
|
||||
```
|
||||
|
||||
> You can also
|
||||
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||
> folder in [Nuclide](http://nuclide.io) and
|
||||
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line), or open
|
||||
> `ios/AwesomeProject.xcodeproj` and hit the `Run` button in Xcode.
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
```
|
||||
react-native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react-native run-android
|
||||
```
|
||||
|
||||
> You can also
|
||||
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||
> folder in [Nuclide](http://nuclide.io) and
|
||||
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line).
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
### Modifying Project
|
||||
|
||||
Now that you successfully started the project, let's modify it:
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
- Open `index.ios.js` in your text editor of choice (e.g. [Nuclide](http://nuclide.io/docs/platforms/react-native/)) and edit some lines.
|
||||
- `$ cd AwesomeProject`
|
||||
- `$ react-native run-ios` **OR** open `ios/AwesomeProject.xcodeproj` and hit "Run" button in Xcode
|
||||
- Open `index.ios.js` in your text editor of choice and edit some lines.
|
||||
- Hit ⌘-R in your iOS simulator to reload the app and see your change!
|
||||
|
||||
<block class="mac android" />
|
||||
_Note: If you are using an iOS device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content)._
|
||||
|
||||
- Press the `R` key twice **OR** open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
|
||||
**To run the Android app:**
|
||||
|
||||
- `$ cd AwesomeProject`
|
||||
- `$ react-native run-android`
|
||||
- Open `index.android.js` in your text editor of choice and edit some lines.
|
||||
- Press the menu button (F2/⌘-M by default, depending on AVD version, or ⌘-M in Genymotion) and select *Reload JS* (or press R twice) to see your change!
|
||||
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
### That's It
|
||||
_Note: If you are using an Android device, see the [Running on Android Device page](docs/running-on-device-android.html#content)._
|
||||
|
||||
Congratulations! You've successfully run and modified your first React Native app.
|
||||
|
||||
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/851555_209575209232981_1876032292_n.png" width="150"></img></center>
|
||||
_If you run into any issues getting started, see the [troubleshooting page](docs/troubleshooting.html#content)._
|
||||
|
||||
<block class="windows linux android" />
|
||||
## Adding Android to an existing React Native project
|
||||
|
||||
## Testing Installation
|
||||
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
|
||||
|
||||
```
|
||||
react-native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react-native run-android
|
||||
```
|
||||
|
||||
<block class="windows android" />
|
||||
|
||||
### Troubleshooting Run
|
||||
|
||||
A common issue on Windows is that the packager is not started automatically when you run
|
||||
`react-native run-android`. You can start it manually using:
|
||||
|
||||
```
|
||||
cd AwesomeProject
|
||||
react-native start
|
||||
```
|
||||
|
||||
Or if you hit a `ERROR Watcher took too long to load` on Windows, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
|
||||
|
||||
### Modifying Project
|
||||
|
||||
Now that you successfully started the project, let's modify it:
|
||||
|
||||
- Press the `R` key twice **OR** open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
|
||||
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
||||
|
||||
### That's It
|
||||
|
||||
Congratulations! You've successfully run and modified your first React Native app.
|
||||
|
||||
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/851555_209575209232981_1876032292_n.png" width="150"></img></center>
|
||||
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
## Common Followups
|
||||
|
||||
<block class="mac ios" />
|
||||
|
||||
- If you want to run on a physical device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content).
|
||||
|
||||
<block class="mac android" />
|
||||
|
||||
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||
|
||||
<block class="mac ios android" />
|
||||
|
||||
- If you run into any issues getting started, see the [Troubleshooting page](docs/troubleshooting.html#content).
|
||||
|
||||
|
||||
<block class="windows linux android" />
|
||||
|
||||
## Common Followups
|
||||
|
||||
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||
|
||||
- If you run into any issues getting started, see the [Troubleshooting page](docs/troubleshooting.html#content).
|
||||
|
||||
<script>
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.getElementsByTagName('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
var span = blocks[i].parentNode;
|
||||
var container = span.parentNode;
|
||||
container.insertBefore(block, span);
|
||||
container.removeChild(span);
|
||||
}
|
||||
// Convert <div>...<block />content<block />...</div>
|
||||
// Into <div>...<block>content</block><block />...</div>
|
||||
blocks = document.getElementsByTagName('block');
|
||||
for (var i = 0; i < blocks.length; ++i) {
|
||||
var block = blocks[i];
|
||||
while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') {
|
||||
block.appendChild(block.nextSibling);
|
||||
}
|
||||
}
|
||||
function display(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
var isMac = navigator.platform === 'MacIntel';
|
||||
var isWindows = navigator.platform === 'Win32';
|
||||
display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
|
||||
display('platform', isMac ? 'ios' : 'android');
|
||||
</script>
|
||||
1. Update the `react-native` dependency in your `package.json` file to [the latest version](https://www.npmjs.com/package/react-native)
|
||||
2. `$ npm install`
|
||||
3. `$ react-native android`
|
||||
|
||||
Reference in New Issue
Block a user