Deploy website

Deploy website version based on 090076872cc9ffc4979e1dde488eddbbb9077afe
This commit is contained in:
Website Deployment Script
2018-11-01 18:34:37 +00:00
parent acb31d738f
commit b988dadcde
743 changed files with 1485 additions and 1485 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.10/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.10/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.10/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.10/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.10/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.10/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.10/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.10/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.10/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.10/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.11/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.11/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.11/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.11/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.11/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.11/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.11/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.11/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.11/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.11/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.11/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.12/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.12/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.12/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.12/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.12/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.12/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.12/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.12/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.12/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.12/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.12/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.13/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.13/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.13/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.13/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.13/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.13/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.13/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.13/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.13/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.13/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.13/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.14/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.14/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.14/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.14/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.14/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.14/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.14/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.14/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.14/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.14/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.14/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.14/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.15/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.15/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.15/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.15/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.15/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.15/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.15/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.15/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.15/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.15/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.15/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.15/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+5 -5
View File
@@ -260,7 +260,7 @@ npm start
</blockquote>
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
<h4><a class="anchor" aria-hidden="true" id="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.0 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 8.1 (Oreo)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
<p>The SDK Manager can be accessed from the &quot;Welcome to Android Studio&quot; screen. Click on &quot;Configure&quot;, then select &quot;SDK Manager&quot;.</p>
<p><block class="native mac android" /></p>
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
@@ -270,9 +270,9 @@ npm start
<blockquote>
<p>The SDK Manager can also be found within the Android Studio &quot;Preferences&quot; dialog, under <strong>Appearance &amp; Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
</blockquote>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.0 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<p>Select the &quot;SDK Platforms&quot; tab from within the SDK Manager, then check the box next to &quot;Show Package Details&quot; in the bottom right corner. Look for and expand the <code>Android 8.1 (Oreo)</code> entry, then make sure the following items are all checked:</p>
<ul>
<li><code>Android SDK Platform 26</code></li>
<li><code>Android SDK Platform 27</code></li>
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
</ul>
<p><block class="native mac android" /></p>
@@ -298,17 +298,17 @@ npm start
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
<p><block class="native mac android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Library/Android/sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native linux android" /></p>
<pre><code class="hljs"><span class="hljs-builtin-name">export</span> <span class="hljs-attribute">ANDROID_HOME</span>=<span class="hljs-variable">$HOME</span>/Android/Sdk
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/tools/bin
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/platform-tools
<span class="hljs-builtin-name">export</span> <span class="hljs-attribute">PATH</span>=<span class="hljs-variable">$PATH</span>:$ANDROID_HOME/emulator
</code></pre>
<p><block class="native mac linux android" /></p>
<blockquote>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -77,7 +77,7 @@ var icon = this.props.active
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
<h2><a class="anchor" aria-hidden="true" id="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L68">packager defaults</a> for the full list.</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/metro/blob/master/packages/metro-config/src/defaults/defaults.js#L14-L44">packager config file</a> for the full list of configuration options).</p>
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.16/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.16/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+1 -1
View File
@@ -36,7 +36,7 @@
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigation.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.16/navigation#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.</p>
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.16/navigation#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms:<a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
<p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.</p>
<p>The first step is to install in your project:</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.16/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.16/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.16/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.16/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+2 -2
View File
@@ -102,7 +102,7 @@
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.16/getting-started">Getting Started guide</a>.</p>
<p>If you used Expo CLI or Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/0.16/getting-started">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
@@ -125,7 +125,7 @@
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.16/getting-started">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/0.16/getting-started">Quick Start instructions</a> to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" id="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file, or if you are using CocoaPods open <code>.xcworkspace</code>, within it using Xcode.</p>
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -102,7 +102,7 @@ $ ./gradlew assembleRelease
<blockquote>
<p>Note: Make sure gradle.properties does not include <em>org.gradle.configureondemand=true</em> as that will make the release build skip bundling JS and assets into the APK.</p>
</blockquote>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/app-release.apk</code>, and is ready to be distributed.</p>
<p>The generated APK can be found under <code>android/app/build/outputs/apk/release/app-release.apk</code>, and is ready to be distributed.</p>
<h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing the release build of your app</h3>
<p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+1 -1
View File
@@ -76,7 +76,7 @@
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="cli-configs"></a><a href="#cli-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>CLI Configs</h3>
<p>When using <code>react-native start</code>, its platform derivatives, and <code>react-native bundle</code> you can use a file to define the CLI options used by React Native by default. If you create a file <code>rn-cli.config.js</code> in the root of your project, it will be evaluated and options for the commands will come from there.</p>
<p>You can see the options for the CLI config file inside the <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/Config.js">source code for Metro here</a>, and here is a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<p>You can see the options for the CLI config on the <a href="https://facebook.github.io/metro/docs/en/configuration">metro website</a>. Here's a common <code>rn-cli.config.js</code> used for supporting TypeScript in React Native projects:</p>
<pre><code class="hljs css language-js"><span class="hljs-built_in">module</span>.exports = {
getTransformModulePath() {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">'react-native-typescript-transformer'</span>);
+3 -3
View File
@@ -113,7 +113,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide only applies to projects made with <code>react-native init</code>
or to those made with Create React Native App which have since ejected. For
or to those made with <code>expo init</code> or Create React Native App which have since ejected. For
more information about ejecting, please see
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
the Create React Native App repository.
@@ -126,11 +126,11 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
</code></pre>
<p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p>
<blockquote>
<p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p>
<p>If you're using Create React Native App or Expo CLI, console logs already appear in the same terminal output as the packager.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="debugging-on-a-device-with-chrome-developer-tools"></a><a href="#debugging-on-a-device-with-chrome-developer-tools" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging on a device with Chrome Developer Tools</h2>
<blockquote>
<p>If you're using Create React Native App, this is configured for you already.</p>
<p>If you're using Create React Native App or Expo CLI, this is configured for you already.</p>
</blockquote>
<p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m"><code>RCTWebSocketExecutor.m</code></a> and change &quot;localhost&quot; to the IP address of your computer, then select &quot;Debug JS Remotely&quot; from the Developer Menu.</p>
<p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p>

Some files were not shown because too many files have changed in this diff Show More