Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on 069de5bd5d
This commit is contained in:
Website Deployment Script
2018-04-06 23:02:06 +00:00
parent 069de5bd5d
commit 8acc8b0320
12 changed files with 33 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/0.54/integration-with-existing-apps.html
+14 -7
View File
@@ -130,14 +130,14 @@
<p>Install the <code>react</code> and <code>react-native</code> packages. Open a terminal or command prompt, then navigate to the directory with your <code>package.json</code> file and run:</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> react-native
</span></code></pre>
<p>This will print something like:</p>
<p>This will print a message similar to the following (scroll up in the yarn output to see it):</p>
<blockquote>
<p>warning &quot;react-native@0.52.2&quot; has unmet peer dependency &quot;react@16.2.0&quot;.</p>
</blockquote>
<p>This is OK, it means we also need to install react:</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> react@16.2.0 <span class="hljs-comment"># Make sure you use the same react version as printed by yarn when installing react-native!</span>
<p>This is OK, it means we also need to install React:</p>
<pre><code class="hljs">$ yarn <span class="hljs-keyword">add</span><span class="bash"> react@version_printed_above
</span></code></pre>
<p>This will create a new <code>/node_modules</code> folder. This folder stores all the JavaScript dependencies required to build your project.</p>
<p>Yarn has created a new <code>/node_modules</code> folder. This folder stores all the JavaScript dependencies required to build your project.</p>
<p>Add <code>node_modules/</code> to your <code>.gitignore</code> file.</p>
<p><block class="objc swift" /></p>
<h3><a class="anchor" aria-hidden="true" id="3-install-cocoapods"></a><a href="#3-install-cocoapods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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. Install CocoaPods</h3>
@@ -156,6 +156,9 @@
<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/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
<h3><a class="anchor" aria-hidden="true" id="command-line-tools-for-xcode"></a><a href="#command-line-tools-for-xcode" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Command Line Tools for Xcode</h3>
<p>Install the Command Line Tools. Choose &quot;Preferences...&quot; in 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/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
<h3><a class="anchor" aria-hidden="true" id="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 &quot;subspecs&quot; 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>&lt;Text&gt;</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>&lt;Image&gt;</code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
@@ -175,7 +178,8 @@ target <span class="hljs-string">'NumberTileGame'</span> <span class="hljs-keywo
<span class="hljs-string">'DevSupport'</span>, <span class="hljs-comment"># Include this to enable In-App Devmenu if RN &gt;= 0.43</span>
<span class="hljs-string">'RCTText'</span>,
<span class="hljs-string">'RCTNetwork'</span>,
<span class="hljs-string">'RCTWebSocket'</span>, <span class="hljs-comment"># needed for debugging</span>
<span class="hljs-string">'RCTWebSocket'</span>, <span class="hljs-comment"># Needed for debugging</span>
<span class="hljs-string">'RCTAnimation'</span>, <span class="hljs-comment"># Needed for FlatList and animations running on native UI thread</span>
<span class="hljs-comment"># Add any other subspecs you want to use in your project</span>
]
<span class="hljs-comment"># Explicitly include Yoga if you are using RN &gt;= 0.42.0</span>
@@ -183,7 +187,7 @@ target <span class="hljs-string">'NumberTileGame'</span> <span class="hljs-keywo
<span class="hljs-comment"># Third party deps podspec link</span>
pod <span class="hljs-string">'DoubleConversion'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'</span>
pod <span class="hljs-string">'glog'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'node_modules/react-native/third-party-podspecs/glog.podspec'</span>
pod <span class="hljs-string">'glog'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/glog.podspec'</span>
pod <span class="hljs-string">'Folly'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/Folly.podspec'</span>
<span class="hljs-keyword">end</span>
@@ -214,7 +218,7 @@ target <span class="hljs-string">'swift-2048'</span> <span class="hljs-keyword">
<span class="hljs-comment"># Third party deps podspec link</span>
pod <span class="hljs-string">'DoubleConversion'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'</span>
pod <span class="hljs-string">'GLog'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/GLog.podspec'</span>
pod <span class="hljs-string">'glog'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/glog.podspec'</span>
pod <span class="hljs-string">'Folly'</span>, <span class="hljs-symbol">:podspec</span> =&gt; <span class="hljs-string">'../node_modules/react-native/third-party-podspecs/Folly.podspec'</span>
<span class="hljs-keyword">end</span>
@@ -233,6 +237,9 @@ Integrating<span class="hljs-built_in"> client </span>project
Sending stats
Pod installation complete! There are 3 dependencies <span class="hljs-keyword">from</span> the Podfile <span class="hljs-keyword">and</span> 1 total pod installed.
</code></pre>
<blockquote>
<p>If this fails with errors mentioning <code>xcrun</code>, make sure that in Xcode in Preferences &gt; Locations the Command Line Tools are assigned.</p>
</blockquote>
<p><block class="swift" /></p>
<blockquote>
<p>If you get a warning such as &quot;<em>The <code>swift-2048 [Debug]</code> target overrides the <code>FRAMEWORK_SEARCH_PATHS</code> build setting defined in <code>Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig</code>. This can lead to problems with the CocoaPods installation</em>&quot;, then make sure the <code>Framework Search Paths</code> in <code>Build Settings</code> for both <code>Debug</code> and <code>Release</code> only contain <code>$(inherited)</code>.</p>
docs/contributing.html
+1 -1
View File
@@ -35,7 +35,7 @@
<p>We will do our best to keep <code>master</code> in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to <a href="https://github.com/facebook/react-native/releases">communicate these changes</a> and version appropriately so you can lock into a specific version if need be.</p>
<p>To see what changes are coming and provide better feedback to React Native contributors, use the <a href="http://facebook.github.io/react-native/versions.html">latest release candidate</a> when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.</p>
<h2><a class="anchor" aria-hidden="true" id="bugs"></a><a href="#bugs" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bugs</h2>
<p>We use <a href="https://github.com/facebook/react-native/issues">GitHub Issues</a> for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a <a href="http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues">bug report</a>.</p>
<p>We use <a href="https://github.com/facebook/react-native/issues">GitHub Issues</a> for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a <a href="http://facebook.github.io/react-native/docs/contributing.html#reporting-new-issues">bug report</a>.</p>
<p>If you have questions about using React Native, the <a href="http://facebook.github.io/react-native/help.html">Community page</a> list various resources that should help you get started.</p>
<p>We also have a <a href="https://react-native.canny.io/feature-requests">place where you can request features or enhancements</a>. If you see anything you'd like to be implemented, vote it up and explain your use case.</p>
<h2><a class="anchor" aria-hidden="true" id="reporting-new-issues"></a><a href="#reporting-new-issues" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reporting new issues</h2>
docs/improvingux.html
+1 -2
View File
@@ -14,7 +14,6 @@
<li><a href="#manage-layout-when-keyboard-is-visible">Manage layout when keyboard is visible</a></li>
<li><a href="#make-tappable-areas-larger">Make tappable areas larger</a></li>
<li><a href="#use-android-ripple">Use Android Ripple</a></li>
<li><a href="#screen-orientation-lock">Screen orientation lock</a></li>
<li><a href="#learn-more">Learn More</a></li>
</ul>
<hr>
@@ -43,7 +42,7 @@
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
<h2><a class="anchor" aria-hidden="true" id="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
<p>Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add <code>'android:screenOrientation=&quot;portrait&quot;'</code> to lock to portrait or <code>'android:screenOrientation=&quot;landscape&quot;'</code> to lock to landscape.</p>
<p>Unless supporting both, it is considered good practice to lock the screen orientation to either portrait or landscape. On iOS, in the General tab and Deployment Info section of Xcode enable the Device Orientation you want to support (ensure you have selected iPhone from the Devices menu when making the changes). For Android, open the AndroidManifest.xml file and within the activity element add 'android:screenOrientation=”portrait”' to lock to portrait or 'android:screenOrientation=”landscape”' to lock to landscape.</p>
<h1><a class="anchor" aria-hidden="true" id="learn-more"></a><a href="#learn-more" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Learn more</h1>
<p><a href="https://material.io/">Material Design</a> and <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/">Human Interface Guidelines</a> are great resources for learning more about designing for mobile platforms.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="accessibility.html">← Accessibility</a><a class="docs-next button" href="timers.html">Timers →</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">Tutorial</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&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></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 © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
docs/native-modules-android.html
+4 -10
View File
@@ -11,10 +11,7 @@
<h2><a class="anchor" aria-hidden="true" id="the-toast-module"></a><a href="#the-toast-module" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Toast Module</h2>
<p>This guide will use the <a href="http://developer.android.com/reference/android/widget/Toast.html">Toast</a> example. Let's say we would like to be able to create a toast message from JavaScript.</p>
<p>We start by creating a native module. A native module is a Java class that usually extends the <code>ReactContextBaseJavaModule</code> class and implements the functionality required by the JavaScript. Our goal here is to be able to write <code>ToastExample.show('Awesome', ToastExample.SHORT);</code> from JavaScript to display a short toast on the screen.</p>
<p>create a new Java Class named <code>ToastModule.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</p>
<pre><code class="hljs css java"><span class="hljs-comment">// ToastModule.java</span>
<span class="hljs-keyword">package</span> com.facebook.react.modules.toast;
<pre><code class="hljs css java"><span class="hljs-keyword">package</span> com.facebook.react.modules.toast;
<span class="hljs-keyword">import</span> android.widget.Toast;
@@ -72,10 +69,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -&gt;<
<p>Read more about <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java">ReadableMap</a> and <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java">ReadableArray</a></p>
<h3><a class="anchor" aria-hidden="true" id="register-the-module"></a><a href="#register-the-module" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Register the Module</h3>
<p>The last step within Java is to register the Module; this happens in the <code>createNativeModules</code> of your apps package. If a module is not registered it will not be available from JavaScript.</p>
<p>create a new Java Class named <code>CustomToastPackage.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</p>
<pre><code class="hljs css java"><span class="hljs-comment">// CustomToastPackage.java</span>
<span class="hljs-keyword">package</span> com.facebook.react.modules.toast;
<pre><code class="hljs css java"><span class="hljs-keyword">package</span> com.facebook.react.modules.toast;
<span class="hljs-keyword">import</span> com.facebook.react.ReactPackage;
<span class="hljs-keyword">import</span> com.facebook.react.bridge.NativeModule;
@@ -86,7 +80,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -&gt;<
<span class="hljs-keyword">import</span> java.util.Collections;
<span class="hljs-keyword">import</span> java.util.List;
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomToastPackage</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">ReactPackage</span> </span>{
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AnExampleReactPackage</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">ReactPackage</span> </span>{
<span class="hljs-meta">@Override</span>
<span class="hljs-function"><span class="hljs-keyword">public</span> List&lt;ViewManager&gt; <span class="hljs-title">createViewManagers</span><span class="hljs-params">(ReactApplicationContext reactContext)</span> </span>{
@@ -109,7 +103,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -&gt;<
<pre><code class="hljs css java"><span class="hljs-function"><span class="hljs-keyword">protected</span> List&lt;ReactPackage&gt; <span class="hljs-title">getPackages</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> Arrays.&lt;ReactPackage&gt;asList(
<span class="hljs-keyword">new</span> MainReactPackage(),
<span class="hljs-keyword">new</span> CustomToastPackage()); <span class="hljs-comment">// &lt;-- Add this line with your package name.</span>
<span class="hljs-keyword">new</span> AnExampleReactPackage()); <span class="hljs-comment">// &lt;-- Add this line with your package name.</span>
}
</code></pre>
<p>To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
docs/native-modules-ios.html
-2
View File
@@ -18,8 +18,6 @@
</code></pre>
<p>In addition to implementing the <code>RCTBridgeModule</code> protocol, your class must also include the <code>RCT_EXPORT_MODULE()</code> macro. This takes an optional argument that specifies the name that the module will be accessible as in your JavaScript code (more on this later). If you do not specify a name, the JavaScript module name will match the Objective-C class name. If the Objective-C class name begins with RCT, the JavaScript module name will exclude the RCT prefix.</p>
<pre><code class="hljs css objectivec"><span class="hljs-comment">// CalendarManager.m</span>
<span class="hljs-meta">#import <span class="hljs-meta-string">"CalendarManager.h"</span></span>
<span class="hljs-class"><span class="hljs-keyword">@implementation</span> <span class="hljs-title">CalendarManager</span></span>
<span class="hljs-comment">// To export a module named CalendarManager</span>
docs/next/improvingux.html
+2 -16
View File
File diff suppressed because one or more lines are too long
docs/next/sectionlist.html
+3 -14
View File
@@ -18,20 +18,9 @@
<li>Scroll loading.</li>
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/next/flatlist.html"><code>&lt;FlatList&gt;</code></a>.</p>
<p>Simple Examples:</p>
<pre><code class="hljs">// Example 1 (Homogeneous Rendering)
&lt;SectionList
renderItem={({ item, index, section }) =&gt; &lt;Text key={index}&gt;{item}&lt;/Text&gt;}
renderSectionHeader={({ section: { title } }) =&gt; &lt;Text style={{ fontWeight: 'bold' }}&gt;{title}&lt;/Text&gt;}
sections={[
{ title: 'Title1', data: ['item1', 'item2'] },
{ title: 'Title2', data: ['item3', 'item4'] },
{ title: 'Title3', data: ['item5', 'item6'] },
]}
keyExtractor={(item, index) =&gt; item + index}
/&gt;
// Example 2 (Heterogeneous Rendering / No Section Headers)
<p>Simple Examples:
// Example 1 (Homogeneous Rendering) &lt;SectionList renderItem={({ item, index, section }) =&gt; <Text key={index}>{item}</Text>} renderSectionHeader={({ section: { title } }) =&gt; &lt;Text style={{ fontWeight: 'bold' }}&gt;{title}</Text>} sections={[ { title: 'Title1', data: ['item1', 'item2'] }, { title: 'Title2', data: ['item3', 'item4'] }, { title: 'Title3', data: ['item5', 'item6'] }, ]} keyExtractor={(item, index) =&gt; item + index} /&gt;</p>
<pre><code class="hljs">// Example 2 (Heterogeneous Rendering / No Section Headers)
const overrideRenderItem = ({ item, index, section: { title, data } }) =&gt; &lt;Text key={index}&gt;Override{item}&lt;/Text&gt;
&lt;SectionList
docs/performance.html
+1 -1
View File
@@ -36,7 +36,7 @@
<p>If your <a href="/react-native/docs/flatlist.html"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="https://facebook.github.io/react-native/flatlist.md#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p>
<h3><a class="anchor" aria-hidden="true" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 FPS plunges when re-rendering a view that hardly changes</h3>
<p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p>
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
<p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p>
<h3><a class="anchor" aria-hidden="true" id="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</h3>
<p>&quot;Slow Navigator transitions&quot; is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p>
<p>The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you <a href="https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html#how-do-i-use-this-in-my-app">set <code>useNativeDriver: true</code></a>, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.</p>
docs/running-on-device.html
+4 -7
View File
@@ -145,7 +145,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
<p><code>22b8:2e76</code></p>
<p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
<p>You'll need to input this into your udev rules in order to get up and running:</p>
<pre><code class="hljs css sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
<pre><code class="hljs css sh"><span class="hljs-built_in">echo</span> SUBSYSTEM==<span class="hljs-string">"usb"</span>, ATTR{idVendor}==<span class="hljs-string">"22b8"</span>, MODE=<span class="hljs-string">"0666"</span>, GROUP=<span class="hljs-string">"plugdev"</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
</code></pre>
<p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
<p><block class="mac windows linux android" /></p>
@@ -188,7 +188,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
<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" id="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, as Apple ATS prohibits URLs with IP addresses instead of domain names, and developers' networks are often not set up to resolve local hostnames. Some routers have security features to prevent DNS Servers from resolving to anything in the local IP range.</p>
<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>
<p>Now check if you are able to resolve the xip.io address, by running <code>nslookup</code>.</p>
<pre><code class="hljs css bash">$ nslookup 10.0.1.123.xip.io
</code></pre>
@@ -206,10 +206,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
<p>You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.</p>
<p><block class="mac windows linux android" /></p>
<p>Run the following in a command prompt:</p>
<pre><code class="hljs">$ adb -s &lt;device <span class="hljs-built_in">name</span>&gt; <span class="hljs-built_in">reverse</span> tcp:<span class="hljs-number">8081</span> tcp:<span class="hljs-number">8081</span>
</code></pre>
<p>To find the device name, run the following adb command:</p>
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> adb devices</span>
<pre><code class="hljs">$ adb reverse <span class="hljs-built_in">t</span><span class="hljs-symbol">cp:8081</span> <span class="hljs-built_in">t</span><span class="hljs-symbol">cp:8081</span>
</code></pre>
<p>You can now enable Live reloading from the <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p>
<h3><a class="anchor" aria-hidden="true" id="method-2-connect-via-wi-fi"></a><a href="#method-2-connect-via-wi-fi" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Method 2: Connect via Wi-Fi</h3>
@@ -226,7 +223,7 @@ emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comme
<li>Open your React Native app on your device.</li>
<li>You'll see a <a href="/react-native/docs/debugging.html#in-app-errors-and-warnings">red screen with an error</a>. This is OK. The following steps will fix that.</li>
<li>Open the in-app <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>.</li>
<li>Go to <strong>Dev Settings</strong> → <strong>Debug server host &amp; port for device</strong>.</li>
<li>Go to <strong>Dev Settings</strong> → <strong>Debug server host for device</strong>.</li>
<li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).</li>
<li>Go back to the <strong>Developer menu</strong> and select <strong>Reload JS</strong>.</li>
</ol>
docs/state.html
+1 -1
View File
@@ -48,7 +48,7 @@
AppRegistry.registerComponent('AwesomeProject', () =&gt; BlinkApp);
</code></pre><iframe style="margin-top: 4" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Blink%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BisShowingText%3A%20true%7D%3B%0A%0A%20%20%20%20%2F%2F%20Toggle%20the%20state%20every%20second%0A%20%20%20%20setInterval(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20this.setState(previousState%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20return%20%7B%20isShowingText%3A%20!previousState.isShowingText%20%7D%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%201000)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20let%20display%20%3D%20this.state.isShowingText%20%3F%20this.props.text%20%3A%20'%20'%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3E%7Bdisplay%7D%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20BlinkApp%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'I%20love%20to%20blink'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Yes%20blinking%20is%20so%20great'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Why%20did%20they%20ever%20take%20this%20out%20of%20HTML'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CBlink%20text%3D'Look%20at%20me%20look%20at%20me%20look%20at%20me'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20BlinkApp)%3B%0A" frame-border="0"></iframe></div>
<p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> to control your data flow. In that case you would use Redux to modify your state rather than calling <code>setState</code> directly.</p>
<p>In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like <a href="https://redux.js.org/">Redux</a> to control your data flow. In that case you would use Redux to modify your state rather than calling <code>setState</code> directly.</p>
<p>When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.</p>
<p>State works the same way as it does in React, so for more details on handling state, you can look at the <a href="https://reactjs.org/docs/react-component.html#setstate">React.Component API</a>. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to <a href="/react-native/docs/style.html">learn about Style</a>.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="props.html">← Props</a><a class="docs-next button" href="style.html">Style →</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">Tutorial</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&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></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 © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
docs/testing.html
+1 -1
View File
@@ -35,7 +35,7 @@ $ npm run flow
javac <span class="hljs-number">1.8</span><span class="hljs-number">.0</span>_111
</code></pre>
<p>The version string <code>1.8.x_xxx</code> corresponds to JDK 8.</p>
<p>You also need to install the <a href="https://buckbuild.com/setup/install.html">Buck build tool</a>. Note that brew may not install the version needed to run the tests. For best results, use the same version as the GitHub builds, which can be found in the <code>.circleci</code> folder in the root of the repo.</p>
<p>You also need to install the <a href="https://buckbuild.com/setup/install.html">Buck build tool</a>.</p>
<p>To run the Android unit tests:</p>
<pre><code class="hljs">$ cd react-native
$ ./scripts/run-android-local-unit-tests.sh
docs/upgrading.html
+1 -1
View File
@@ -36,7 +36,7 @@
<pre><code class="hljs css sh">$ react-native-git-upgrade
</code></pre>
<blockquote>
<p>You may specify a React Native version by passing an argument: <code>react-native-git-upgrade X.Y.Z</code></p>
<p>You may specify a React Native version by passing an argument: <code>react-native-git-upgrade X.Y</code></p>
</blockquote>
<p>The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources.</p>
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>