mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.10/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.10/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.10/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.10/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.11</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.11/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.11/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.11/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.11/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.11/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.12</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.12/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.12/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.12/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.12/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.12/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.13/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.13/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.13/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.13/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.13/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.14</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.14/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.14/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.14/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.14/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.14/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.15</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.15/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.15/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.15/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.15/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.15/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.16</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.16/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.16/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.16/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.16/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.16/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.17</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.17/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.17/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.17/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.17/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.17/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.18</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.18/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.18/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.18/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.18/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.18/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<p>We highly recommend that you watch Conrad Kramer's talk on <a href="https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/">Memory Use in Extensions</a> to learn more about this topic.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="today-widget"></a><a href="#today-widget" aria-hidden="true" class="hash-link" ><svg 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>Today widget</h3>
|
||||
<p>The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':</p>
|
||||
<p><img src="/react-native/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/TodayWidgetUnableToLoad.png" alt=""></p>
|
||||
<p>Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use <a href="https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html">Xcode's Instruments</a> to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.</p>
|
||||
<p>To experiment with the limits of React Native Today widget implementations, try extending the example project in <a href="https://github.com/matejkriz/react-native-today-widget/">react-native-today-widget</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="other-app-extensions"></a><a href="#other-app-extensions" aria-hidden="true" class="hash-link" ><svg 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>Other app extensions</h3>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.19</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.19/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><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/website/versioned_docs/version-0.5/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/assets/buttonExample.png"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.19/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.19/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<p>React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="accessing-the-in-app-developer-menu"></a><a href="#accessing-the-in-app-developer-menu" aria-hidden="true" class="hash-link" ><svg 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>Accessing the In-App Developer Menu</h2>
|
||||
<p>You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the <code>⌘D</code> keyboard shortcut when your app is running in the iOS Simulator, or <code>⌘M</code> when running in an Android emulator. Alternatively for Android, you can run the command <code>adb shell input keyevent 82</code> to open the dev menu (82 being the Menu key code).</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>The Developer Menu is disabled in release (production) builds.</p>
|
||||
</blockquote>
|
||||
@@ -56,23 +56,23 @@
|
||||
<p>Now run <code>react-devtools</code> from the terminal to launch the standalone DevTools app:</p>
|
||||
<pre><code class="hljs"><span class="hljs-attribute">react-devtools</span>
|
||||
</code></pre>
|
||||
<p><img src="/react-native/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevTools.png" alt="React DevTools"></p>
|
||||
<p>It should connect to your simulator within a few seconds.</p>
|
||||
<blockquote>
|
||||
<p>Note: if you prefer to avoid global installations, you can add <code>react-devtools</code> as a project dependency. Add the <code>react-devtools</code> package to your project using <code>npm install --save-dev react-devtools</code>, then add <code>"react-devtools": "react-devtools"</code> to the <code>scripts</code> section in your <code>package.json</code>, and then run <code>npm run react-devtools</code> from your project folder to open the DevTools.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-with-react-native-inspector"></a><a href="#integration-with-react-native-inspector" aria-hidden="true" class="hash-link" ><svg 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>Integration with React Native Inspector</h3>
|
||||
<p>Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:</p>
|
||||
<p><img src="/react-native/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p><img src="/react-native/docs/assets/Inspector.png" alt="React Native Inspector"></p>
|
||||
<p>However, when <code>react-devtools</code> is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsInspector.png" alt="React DevTools Inspector Integration"></p>
|
||||
<p>You can choose "Hide Inspector" in the same menu to exit this mode.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inspecting-component-instances"></a><a href="#inspecting-component-instances" aria-hidden="true" class="hash-link" ><svg 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>Inspecting Component Instances</h3>
|
||||
<p>When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.</p>
|
||||
<p>First, follow the instructions for debugging in Chrome to open the Chrome console.</p>
|
||||
<p>Make sure that the dropdown in the top left corner of the Chrome console says <code>debuggerWorker.js</code>. <strong>This step is essential.</strong></p>
|
||||
<p>Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as <code>$r</code> in the Chrome console, letting you inspect its props, state, and instance properties.</p>
|
||||
<p><img src="/react-native/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/ReactDevToolsDollarR.png" alt="React DevTools Chrome Console Integration"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="performance-monitor"></a><a href="#performance-monitor" aria-hidden="true" class="hash-link" ><svg 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>Performance Monitor</h2>
|
||||
<p>You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.</p>
|
||||
<hr style="margin-top:25px; margin-bottom:25px;"/>
|
||||
|
||||
@@ -122,7 +122,7 @@ automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
@@ -275,7 +275,7 @@ higher.</p>
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p><img src="/react-native/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg 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>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
@@ -321,9 +321,9 @@ Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
@@ -341,24 +341,24 @@ all checked:</p>
|
||||
<li><code>Google APIs Intel x86 Atom_64 System Image</code></li>
|
||||
</ul>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerMacOS.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg 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>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
@@ -392,7 +392,7 @@ location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
@@ -445,15 +445,15 @@ instructions <a href="/react-native/docs/0.19/running-on-device.html">here</a>.<
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg 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>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
@@ -465,21 +465,21 @@ on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
@@ -491,7 +491,7 @@ proceed to the next step.</p>
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
@@ -511,9 +511,9 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
@@ -546,12 +546,12 @@ see your changes!</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg 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>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p><center><img src="/react-native/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg 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>Now what?</h2>
|
||||
<ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ all platforms. The minimal example to display a button looks like this:</p>
|
||||
text on Android. Pressing the button will call the "onPress" function, which in
|
||||
this case displays an alert popup. If you like, you can specify a "color" prop
|
||||
to change the color of your button.</p>
|
||||
<p><img src="/react-native/assets/Button.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/Button.png" alt=""></p>
|
||||
<p>Go ahead and play around with the <code>Button</code> component using the example below.
|
||||
You can select which platform your app is previewed in by clicking on the toggle
|
||||
in the bottom right, then click on "Tap to Play" to preview the app.</p>
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg 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>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
@@ -297,7 +297,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg 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. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg 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. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
@@ -380,7 +380,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg 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>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
@@ -414,9 +414,9 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
@@ -630,7 +630,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg 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. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg 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>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
|
||||
@@ -41,12 +41,12 @@ add <code># Add new pods below this line</code> comment to places where you expe
|
||||
folder.
|
||||
Drag this file to your project on Xcode (usually under the <code>Libraries</code> group
|
||||
on Xcode);</p>
|
||||
<p><img src="/react-native/assets/AddToLibraries.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToLibraries.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-2"></a><a href="#step-2" aria-hidden="true" class="hash-link" ><svg 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>Step 2</h4>
|
||||
<p>Click on your main project file (the one that represents the <code>.xcodeproj</code>)
|
||||
select <code>Build Phases</code> and drag the static library from the <code>Products</code> folder
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p>
|
||||
<p><img src="/react-native/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToBuildPhases.png" alt=""></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="step-3"></a><a href="#step-3" aria-hidden="true" class="hash-link" ><svg 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>Step 3</h4>
|
||||
<p>Not every library will need this step, what you need to consider is:</p>
|
||||
<p><em>Do I need to know the contents of the library at compile time?</em></p>
|
||||
@@ -61,7 +61,7 @@ received.</p>
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search Paths</code>. There you should include the path to your library (if it has relevant
|
||||
files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
|
||||
example).</p>
|
||||
<p><img src="/react-native/assets/AddToSearchPaths.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/AddToSearchPaths.png" alt=""></p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-components-ios.html">← Native UI Components</a><a class="docs-next button" href="running-on-simulator-ios.html">Running On Simulator →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@@ -47,7 +47,7 @@ const App = StackNavigator({
|
||||
<p>For a complete intro to React Navigation, follow the <a href="https://reactnavigation.org/docs/intro/">React Navigation Getting Started Guide</a>, or browse other docs such as the <a href="https://reactnavigation.org/docs/navigators/">Intro to Navigators</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="navigatorios"></a><a href="#navigatorios" aria-hidden="true" class="hash-link" ><svg 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>NavigatorIOS</h2>
|
||||
<p><code>NavigatorIOS</code> looks and feels just like <a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/"><code>UINavigationController</code></a>, because it is actually built on top of it.</p>
|
||||
<p><img src="/react-native/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/NavigationStack-NavigatorIOS.png" alt=""></p>
|
||||
<pre><code class="hljs css javascript"><NavigatorIOS
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
|
||||
+13
-13
@@ -19,7 +19,7 @@ iOS devices display 60 frames per second, which gives you and the UI system abou
|
||||
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p>
|
||||
<p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>.
|
||||
You will notice that there are two different frame rates.</p>
|
||||
<p><img src="/react-native/assets/PerfUtil.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/PerfUtil.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="js-frame-rate-javascript-thread"></a><a href="#js-frame-rate-javascript-thread" aria-hidden="true" class="hash-link" ><svg 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>JS frame rate (JavaScript thread)</h3>
|
||||
<p>For most React Native applications, your business logic will run on the JavaScript thread.
|
||||
This is where your React application lives, API calls are made, touch events are processed, etc...
|
||||
@@ -150,13 +150,13 @@ Run <code>systrace</code> as follows:</p>
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-reading-the-trace"></a><a href="#2-reading-the-trace" aria-hidden="true" class="hash-link" ><svg 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. Reading the trace</h4>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>:
|
||||
Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -166,7 +166,7 @@ Use the WASD keys to strafe and zoom</p>
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above.
|
||||
If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
@@ -183,38 +183,38 @@ If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
This is where standard android measure/layout/draw happens.
|
||||
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
|
||||
The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong>
|
||||
This is where JavaScript is executed.
|
||||
The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being.
|
||||
To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong>
|
||||
This is where native module calls (e.g. the <code>UIManager</code>) are executed.
|
||||
The thread name will be either <code>mqt_native_modules</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong>
|
||||
If you're using Android L (5.0) and up, you will also have a render thread in your application.
|
||||
This thread generates the actual OpenGL commands used to draw your UI.
|
||||
The thread name will be either <code>RenderThread</code> or <code><...></code>.
|
||||
To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="identifying-a-culprit"></a><a href="#identifying-a-culprit" aria-hidden="true" class="hash-link" ><svg 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>Identifying a culprit</h4>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame,
|
||||
all our UI work needs to be done by the end of that 16ms period.
|
||||
Notice that no thread is working close to the frame boundary.
|
||||
An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing basically all the time, and across frame boundaries!
|
||||
This app is not rendering at 60 FPS.
|
||||
In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries.
|
||||
The UI that we're trying to render on each frame is requiring too much work to be done.
|
||||
In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
@@ -238,7 +238,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
</ol>
|
||||
<h5><a class="anchor" aria-hidden="true" name="too-much-gpu-work"></a><a href="#too-much-gpu-work" aria-hidden="true" class="hash-link" ><svg 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>Too much GPU work</h5>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -248,7 +248,7 @@ And many times, you'll want to look into <a href="https://facebook.github.io/rea
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://developer.android.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" aria-hidden="true" class="hash-link" ><svg 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>Creating new views on the UI thread</h5>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="unbundling-inline-requires"></a><a href="#unbundling-inline-requires" aria-hidden="true" class="hash-link" ><svg 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>Unbundling + inline requires</h2>
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg 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. Configure code signing</h3>
|
||||
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
|
||||
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
|
||||
<p>Repeat this step for the Tests target in your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg 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>3. Build and Run your app</h3>
|
||||
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
|
||||
<p><img src="/react-native/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
|
||||
<blockquote>
|
||||
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
|
||||
</blockquote>
|
||||
@@ -171,7 +171,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p><block class="mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg 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>Connecting to the development server</h2>
|
||||
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/0.19/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
|
||||
<p><img src="/react-native/assets/DeveloperMenu.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg 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>Troubleshooting</h3>
|
||||
<blockquote>
|
||||
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
|
||||
@@ -185,7 +185,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg 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. IP address</h4>
|
||||
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
|
||||
<p><img src="/react-native/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
|
||||
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg 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>3. Network/router configuration</h4>
|
||||
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
|
||||
@@ -240,7 +240,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg 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. Configure release scheme</h3>
|
||||
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
|
||||
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
|
||||
<p><img src="/react-native/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg 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>3. Build app for release</h3>
|
||||
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
|
||||
<blockquote>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user