mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -80,31 +80,56 @@ choco install jdk8</div><p>If you have already installed Node on your system, ma
|
||||
|
||||
</span><blockquote><p>Android Studio requires a recent version of the <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">Java SE Development Kit (JDK)</a>. Go ahead and install JDK 8 or newer if needed.</p></blockquote><span><block class="mac linux windows android" />
|
||||
|
||||
</span><h4><a class="anchor" name="1-download-and-install-android-studio"></a>1. Download and install Android Studio <a class="hash-link" href="docs/getting-started.html#1-download-and-install-android-studio">#</a></h4><p>Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps. <a href="https://developer.android.com/studio/index.html" target="_blank">Download Android Studio</a>, then follow the <a href="https://developer.android.com/studio/install.html" target="_blank">installation instructions</a>. Choose <code>Custom</code> installation when prompted by the Setup Wizard, and proceed to the next step.</p><span><block class="mac windows android" />
|
||||
</span><h4><a class="anchor" name="1-install-android-studio"></a>1. Install Android Studio <a class="hash-link" href="docs/getting-started.html#1-install-android-studio">#</a></h4><p>Android Studio provides the Android SDK and Android Virtual Device (emulator) required to run and test your React Native apps. Download and install <a href="https://developer.android.com/studio/index.html" target="_blank">Android Studio</a>.</p><p>Once the installation process is completed, launch Android Studio. Choose "Custom" when prompted to select an installation type. Make sure the boxes next to all of the following are checked:</p><span><block class="mac windows android" />
|
||||
|
||||
</span><h4><a class="anchor" name="2-install-the-avd-and-haxm"></a>2. Install the AVD and HAXM <a class="hash-link" href="docs/getting-started.html#2-install-the-avd-and-haxm">#</a></h4><p>Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose <code>Custom</code> installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:</p><ul><li><code>Android SDK</code></li><li><code>Android SDK Platform</code></li><li><code>Performance (Intel ® HAXM)</code></li><li><code>Android Virtual Device</code></li></ul><p>Then, click "Next" to install all of these components.</p><blockquote><p>If you've already installed Android Studio before, you can still install HAXM (<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows" target="_blank">Windows</a>|<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x" target="_blank">Mac</a>) without performing a custom installation.</p></blockquote><span><block class="linux android" />
|
||||
</span><ul><li><code>Android SDK</code></li><li><code>Android SDK Platform</code></li><li><code>Performance (Intel ® HAXM)</code></li><li><code>Android Virtual Device</code></li></ul><p>Then, click "Next" to install all of these components.</p><span><block class="linux android" />
|
||||
|
||||
</span><h4><a class="anchor" name="2-install-the-avd-and-configure-vm-acceleration"></a>2. Install the AVD and configure VM acceleration <a class="hash-link" href="docs/getting-started.html#2-install-the-avd-and-configure-vm-acceleration">#</a></h4><p>Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose <code>Custom</code> installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:</p><ul><li><code>Android SDK</code></li><li><code>Android SDK Platform</code></li><li><code>Android Virtual Device</code></li></ul><p>Click "Next" to install all of these components, then <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux" target="_blank">configure VM acceleration</a> on your system.</p><span><block class="mac linux windows android" />
|
||||
</span><ul><li><code>Android SDK</code></li><li><code>Android SDK Platform</code></li><li><code>Android Virtual Device</code></li></ul><p>Click "Next" to install all of these components, then <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux" target="_blank">configure VM acceleration</a> on your system.</p><span><block class="windows android" />
|
||||
|
||||
</span><h4><a class="anchor" name="3-install-the-android-6-0-marshmallow-sdk"></a>3. Install the Android 6.0 (Marshmallow) SDK <a class="hash-link" href="docs/getting-started.html#3-install-the-android-6-0-marshmallow-sdk">#</a></h4><p>Android Studio installs the most recent Android SDK by default. React Native, however, requires the <code>Android 6.0 (Marshmallow)</code> SDK. To install it, launch the SDK Manager, click on "Configure" > "SDK Manager" in the "Welcome to Android Studio" screen.</p><blockquote><p>The SDK Manager can also be found within the Android Studio "Preferences" menu, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 6.0 (Marshmallow)</code> entry, then make sure the following items are all checked:</p><ul><li><code>Google APIs</code></li><li><code>Android SDK Platform 23</code></li><li><code>Intel x86 Atom_64 System Image</code></li><li><code>Google APIs Intel x86 Atom_64 System Image</code></li></ul><p><img src="img/AndroidSDKManager.png" alt="Android SDK Manager"></p><p>Next, select the "SDK Tools" tab 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 <code>Android SDK Build-Tools 23.0.1</code> is selected.</p><p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p><span><block class="mac windows linux android" />
|
||||
</span><blockquote><p>You may also install Intel ® HAXM by following <a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows" target="_blank">these instructions</a>.</p></blockquote><span><block class="mac android" />
|
||||
|
||||
</span><h4><a class="anchor" name="4-set-up-the-android-home-environment-variable"></a>4. Set up the ANDROID_HOME environment variable <a class="hash-link" href="docs/getting-started.html#4-set-up-the-android-home-environment-variable">#</a></h4><p>The React Native command line interface requires the <code>ANDROID_HOME</code> environment variable to be set up.</p><span><block class="mac android" />
|
||||
</span><blockquote><p>You may also install Intel ® HAXM by following <a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x" target="_blank">these instructions</a>.</p></blockquote><span><block class="windows mac linux android" />
|
||||
|
||||
</span><h4><a class="anchor" name="2-install-the-android-6-0-marshmallow-sdk"></a>2. Install the Android 6.0 (Marshmallow) SDK <a class="hash-link" href="docs/getting-started.html#2-install-the-android-6-0-marshmallow-sdk">#</a></h4><p>Android Studio installs the most recent Android SDK by default. React Native, however, requires the <code>Android 6.0 (Marshmallow)</code> SDK. You can use the SDK Manager to install additional SDK platforms. To access the SDK Manager, click on "Configure", then select "SDK Manager" from the "Welcome to Android Studio" screen.</p><blockquote><p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 6.0 (Marshmallow)</code> entry, then make sure the following items are all checked:</p><ul><li><code>Google APIs</code></li><li><code>Android SDK Platform 23</code></li><li><code>Intel x86 Atom_64 System Image</code></li><li><code>Google APIs Intel x86 Atom_64 System Image</code></li></ul><span><block class="mac android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p><span><block class="windows android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerWindows.png" alt="Android SDK Manager"></p><span><block class="windows mac linux android" />
|
||||
|
||||
</span><p>Next, select the "SDK Tools" tab 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 <code>23.0.1</code> is selected.</p><span><block class="mac android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p><span><block class="windows android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p><span><block class="windows mac linux android" />
|
||||
|
||||
</span><p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p><span><block class="mac android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p><span><block class="windows android" />
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h4><a class="anchor" name="3-set-up-the-android-home-environment-variable"></a>3. Set up the ANDROID_HOME environment variable <a class="hash-link" href="docs/getting-started.html#3-set-up-the-android-home-environment-variable">#</a></h4><p>The React Native command line interface requires the <code>ANDROID_HOME</code> environment variable to be set up.</p><span><block class="mac android" />
|
||||
|
||||
</span><p>Add the following lines to your <code>~/.profile</code> (or equivalent) config file:</p><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$<span class="token punctuation">{</span>HOME<span class="token punctuation">}</span><span class="token operator">/</span>Library<span class="token operator">/</span>Android<span class="token operator">/</span>sdk
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>source ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code>. If you installed the Android SDK using Homebrew, it would be located at <code>/usr/local/opt/android-sdk</code>.</p></blockquote><span><block class="linux android" />
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>source ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code>. If you installed the Android SDK using Homebrew, it would be located at <code>/usr/local/opt/android-sdk</code>. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><span><block class="linux android" />
|
||||
|
||||
</span><p>Add the following lines to your <code>~/.profile</code> (or equivalent) config file:</p><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$<span class="token punctuation">{</span>HOME<span class="token punctuation">}</span><span class="token operator">/</span>Android<span class="token operator">/</span>Sdk
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>source ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code> if you did not install the Android SDK using Android Studio.</p></blockquote><span><block class="windows android" />
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>source ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code> if you did not install the Android SDK using Android Studio. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><span><block class="windows android" />
|
||||
|
||||
</span><p>Go to <strong>Control Panel</strong> → <strong>System and Security</strong> → <strong>System</strong> → <strong>Change settings</strong> →
|
||||
<strong>Advanced System Settings</strong> → <strong>Environment variables</strong> → <strong>New</strong>, then enter the path to your Android SDK.</p><p><img src="img/react-native-android-sdk-environment-variable-windows.png" alt="env variable"></p><p>Restart the Command Prompt to apply the new environment variable.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code> if you did not install the Android SDK using Android Studio.</p></blockquote><span><block class="linux android" />
|
||||
</span><p>Open the System pane under <strong>System and Security</strong> in the Control Panel, then click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on <strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code> user variable that points to the path to your Android SDK.</p><p><img src="img/AndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p><p>You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p><p>Open a new Command Prompt window to ensure the new environment variable is loaded.</p><span><block class="linux android" />
|
||||
|
||||
</span><h3><a class="anchor" name="watchman-optional"></a>Watchman (optional) <a class="hash-link" href="docs/getting-started.html#watchman-optional">#</a></h3><p>Follow the <a href="https://facebook.github.io/watchman/docs/install.html#build-install" target="_blank">Watchman installation guide</a> to compile and install Watchman from source.</p><blockquote><p><a href="https://facebook.github.io/watchman/docs/install.html" target="_blank">Watchman</a> 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.</p></blockquote><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="starting-the-android-virtual-device"></a>Starting the Android Virtual Device <a class="hash-link" href="docs/getting-started.html#starting-the-android-virtual-device">#</a></h2><p><img src="img/react-native-tools-avd.png" alt="Android Studio AVD Manager"></p><p>You can see the list of available AVDs by opening the "AVD Manager" from within Android Studio.</p><p>Once in the "AVD Manager", select your AVD and click "Edit...". Choose "Android 6.0 - API Level 23" under Device, and "Intel Atom (x86_64)" under CPU/ABI. Click OK, then select your new AVD and click "Start...", and finally, "Launch".</p><p><img src="img/AndroidAVDConfiguration.png" alt="Android AVD Configuration"></p><blockquote><p>It is very common to run into an issue where Android Studio fails to create a default AVD. You may follow the <a href="https://developer.android.com/studio/run/managing-avds.html" target="_blank">Android Studio User Guide</a> to create a new AVD manually if needed.</p></blockquote><h3><a class="anchor" name="using-a-real-device"></a>Using a real device <a class="hash-link" href="docs/getting-started.html#using-a-real-device">#</a></h3><p>If you have a physical Android device, you can use it for development in place of an AVD. Plug it in to your computer using a USB cable and <a href="https://developer.android.com/training/basics/firstapp/running-app.html" target="_blank">enable USB debugging</a> before proceeding to the next step.</p><span><block class="mac ios android" />
|
||||
</span><h2><a class="anchor" name="starting-the-android-virtual-device"></a>Starting the Android Virtual Device <a class="hash-link" href="docs/getting-started.html#starting-the-android-virtual-device">#</a></h2><p>You can see the list of available AVDs by opening the "AVD Manager" from within Android Studio:</p><p><img src="img/react-native-tools-avd.png" alt="Android Studio AVD Manager"></p><span><block class="windows linux android" />
|
||||
|
||||
</span><p>Launch the default AVD before proceeding to the next step.</p><span><block class="mac android" />
|
||||
|
||||
</span><p>Once in the "AVD Manager", select your AVD and click "Edit...". Choose "Android 6.0 - API Level 23" under Device, and "Intel Atom (x86_64)" under CPU/ABI. Click OK, then select your new AVD and click "Start...", and finally, "Launch".</p><p><img src="img/AndroidAVDConfiguration.png" alt="Android AVD Configuration"></p><span><block class="mac windows linux android" />
|
||||
|
||||
</span><blockquote><p>It is very common to run into an issue where Android Studio fails to create a default AVD. You may follow the <a href="https://developer.android.com/studio/run/managing-avds.html" target="_blank">Android Studio User Guide</a> to create a new AVD manually if needed.</p></blockquote><h3><a class="anchor" name="using-a-real-device"></a>Using a real device <a class="hash-link" href="docs/getting-started.html#using-a-real-device">#</a></h3><p>If you have a physical Android device, you can use it for development in place of an AVD. Plug it in to your computer using a USB cable and <a href="https://developer.android.com/training/basics/firstapp/running-app.html" target="_blank">enable USB debugging</a> before proceeding to the next step.</p><span><block class="mac ios android" />
|
||||
|
||||
</span><h2><a class="anchor" name="testing-your-react-native-installation"></a>Testing your React Native Installation <a class="hash-link" href="docs/getting-started.html#testing-your-react-native-installation">#</a></h2><span><block class="mac ios" />
|
||||
|
||||
@@ -116,7 +141,7 @@ react<span class="token operator">-</span>native run<span class="token operator"
|
||||
</span><p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run <code>react-native run-android</code> inside the newly created folder:</p><div class="prism language-javascript"># skip <span class="token keyword">this</span> first command <span class="token keyword">if</span> you ejected from Create React Native App
|
||||
react<span class="token operator">-</span>native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>android</div><p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p><p><img src="img/AndroidSuccess.png" alt="AwesomeProject on Android"></p><p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><span><block class="mac ios android" />
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>android</div><p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p><p><img src="img/AndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p><p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><span><block class="mac ios android" />
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><span><block class="mac ios" />
|
||||
|
||||
@@ -138,7 +163,7 @@ react<span class="token operator">-</span>native init AwesomeProject
|
||||
cd AwesomeProject
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>android</div><span><block class="windows linux android" />
|
||||
|
||||
</span><p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p><p><img src="img/AndroidSuccess.png" alt="AwesomeProject on Android"></p><span><block class="windows linux android" />
|
||||
</span><p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p><p><img src="img/AndroidSuccessWindows.png" alt="AwesomeProject on Android"></p><span><block class="windows linux android" />
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu to see your change!</li></ul><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified a React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Reference in New Issue
Block a user