mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -7,7 +7,9 @@ RCTRootView <span class="token operator">*</span>rootView <span class="token ope
|
||||
moduleName<span class="token punctuation">:</span>@<span class="token string">"ImageBrowserApp"</span>
|
||||
initialProperties<span class="token punctuation">:</span>props<span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
import React<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
import React from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
Image
|
||||
<span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
@@ -27,7 +29,7 @@ class <span class="token class-name">ImageBrowserApp</span> extends <span class=
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
React<span class="token punctuation">.</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ImageBrowserApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ImageBrowserApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>RCTRootView</code> also provides a read-write property <code>appProperties</code>. After <code>appProperties</code> is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.</p><div class="prism language-javascript">NSArray <span class="token operator">*</span>imageList <span class="token operator">=</span> @<span class="token punctuation">[</span>@<span class="token string">"http://foo.com/bar3.png"</span><span class="token punctuation">,</span>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'ImageBrowserApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ImageBrowserApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>RCTRootView</code> also provides a read-write property <code>appProperties</code>. After <code>appProperties</code> is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.</p><div class="prism language-javascript">NSArray <span class="token operator">*</span>imageList <span class="token operator">=</span> @<span class="token punctuation">[</span>@<span class="token string">"http://foo.com/bar3.png"</span><span class="token punctuation">,</span>
|
||||
@<span class="token string">"http://foo.com/bar4.png"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
rootView<span class="token punctuation">.</span>appProperties <span class="token operator">=</span> @<span class="token punctuation">{</span>@<span class="token string">"images"</span> <span class="token punctuation">:</span> imageList<span class="token punctuation">}</span><span class="token punctuation">;</span></div><p>It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.</p><p>There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.</p><blockquote><p><strong><em>Note:</em></strong>
|
||||
|
||||
@@ -59,7 +59,10 @@ public boolean <span class="token function">onKeyUp<span class="token punctuatio
|
||||
$ npm install <span class="token operator">--</span>save react<span class="token operator">-</span>native
|
||||
$ curl <span class="token operator">-</span>o <span class="token punctuation">.</span>flowconfig https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>raw<span class="token punctuation">.</span>githubusercontent<span class="token punctuation">.</span>com<span class="token operator">/</span>facebook<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token regex">/master/</span><span class="token punctuation">.</span>flowconfig</div><p>This creates a node module for your app and adds the <code>react-native</code> npm dependency. Now open the newly created <code>package.json</code> file and add this under <code>scripts</code>:</p><div class="prism language-javascript"><span class="token string">"start"</span><span class="token punctuation">:</span> <span class="token string">"node node_modules/react-native/local-cli/cli.js start"</span></div><p>Copy & paste the following code to <code>index.android.js</code> in your root folder — it's a barebones React Native app:</p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
import React<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
import React from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
@@ -73,7 +76,7 @@ class <span class="token class-name">MyAwesomeApp</span> extends <span class="to
|
||||
<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">var</span> styles <span class="token operator">=</span> React<span class="token punctuation">.</span>StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
@@ -85,7 +88,7 @@ class <span class="token class-name">MyAwesomeApp</span> extends <span class="to
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
React<span class="token punctuation">.</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'MyAwesomeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="docs/embedded-app-android.html#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). 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="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="docs/embedded-app-android.html#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You'll want to make your own "ReactFragment" or "ReactActivity" and have a singleton "holder" that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'MyAwesomeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="docs/embedded-app-android.html#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). 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="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="docs/embedded-app-android.html#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You'll want to make your own "ReactFragment" or "ReactActivity" and have a singleton "holder" that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://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),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -10,12 +10,15 @@ pod <span class="token string">'React'</span><span class="token punctu
|
||||
<span class="token punctuation">]</span></div><p>Remember to install all subspecs you need. The <code><Text></code> element cannot be used without the <code>RCTText</code> subspec, for example.</p><p>Then install your pods:</p><div class="prism language-javascript">$ pod install</div><h2><a class="anchor" name="create-your-react-native-app"></a>Create Your React Native App <a class="hash-link" href="docs/embedded-app-ios.html#create-your-react-native-app">#</a></h2><p>There are two pieces you’ll need to set up:</p><ol><li>The root JavaScript file that will contain your actual React Native app and other components</li><li>Wrapper Objective-C code that will load up your script and create a <code>RCTRootView</code> to display and manage your React Native components</li></ol><p>First, create a directory for your app’s React code and create a simple <code>index.ios.js</code> file:</p><div class="prism language-javascript">$ mkdir ReactComponent
|
||||
$ touch ReactComponent<span class="token operator">/</span>index<span class="token punctuation">.</span>ios<span class="token punctuation">.</span>js</div><p>Copy & paste following starter code for <code>index.ios.js</code> – it’s a barebones React Native app:</p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
|
||||
import React<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
import React from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> styles <span class="token operator">=</span> React<span class="token punctuation">.</span>StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span>
|
||||
@@ -32,7 +35,7 @@ class <span class="token class-name">SimpleApp</span> extends <span class="token
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
React<span class="token punctuation">.</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'SimpleApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> SimpleApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>SimpleApp</code> will be your <strong>module name</strong>, which will be used later on.</p><h2><a class="anchor" name="add-container-view-to-your-app"></a>Add Container View To Your App <a class="hash-link" href="docs/embedded-app-ios.html#add-container-view-to-your-app">#</a></h2><p>You should now add a container view for the React Native component. It can be any <code>UIView</code> in your app.</p><p><img src="img/EmbeddedAppContainerViewExample.png" alt="Container view example"></p><p>However, let's subclass <code>UIView</code> for the sake of clean code. Let's name it <code>ReactView</code>. Open up <code>Yourproject.xcworkspace</code> and create a new class <code>ReactView</code> (You can name it whatever you like :)).</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ReactView.h
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'SimpleApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> SimpleApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>SimpleApp</code> will be your <strong>module name</strong>, which will be used later on.</p><h2><a class="anchor" name="add-container-view-to-your-app"></a>Add Container View To Your App <a class="hash-link" href="docs/embedded-app-ios.html#add-container-view-to-your-app">#</a></h2><p>You should now add a container view for the React Native component. It can be any <code>UIView</code> in your app.</p><p><img src="img/EmbeddedAppContainerViewExample.png" alt="Container view example"></p><p>However, let's subclass <code>UIView</code> for the sake of clean code. Let's name it <code>ReactView</code>. Open up <code>Yourproject.xcworkspace</code> and create a new class <code>ReactView</code> (You can name it whatever you like :)).</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ReactView.h
|
||||
</span>
|
||||
#import <UIKit<span class="token operator">/</span>UIKit<span class="token punctuation">.</span>h<span class="token operator">></span>
|
||||
@interface <span class="token class-name">ReactView</span> <span class="token punctuation">:</span> UIView
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -31,7 +31,8 @@ public class <span class="token class-name">ReactImageManager</span> extends <sp
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="5-implement-the-javascript-module"></a>5. Implement the JavaScript module <a class="hash-link" href="docs/native-components-android.html#5-implement-the-javascript-module">#</a></h2><p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the <code>propTypes</code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ImageView.js
|
||||
</span>
|
||||
import <span class="token punctuation">{</span> requireNativeComponent<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> PropTypes <span class="token punctuation">}</span> from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> iface <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'ImageView'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -23,7 +23,8 @@ import <span class="token punctuation">{</span> requireNativeComponent <span cla
|
||||
</span>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">requireNativeComponent<span class="token punctuation">(</span></span><span class="token string">'RCTMap'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p><h2><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/native-components-ios.html#properties">#</a></h2><p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable pitch control and specify the visible region. Disabling pitch is a simple boolean, so we add this one line:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// RCTMapManager.m
|
||||
</span><span class="token function">RCT_EXPORT_VIEW_PROPERTY<span class="token punctuation">(</span></span>pitchEnabled<span class="token punctuation">,</span> BOOL<span class="token punctuation">)</span></div><p>Note that we explicitly specify the type as <code>BOOL</code> - React Native uses <code>RCTConvert</code> under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.</p><p>Now to actually disable pitch, we set the property in JS:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// MyApp.js
|
||||
</span><MapView pitchEnabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span></div><p>This isn't very well documented though - in order to know what properties are available and what values they accept, the client of your new component needs to dig through the Objective-C code. To make this better, let's make a wrapper component and document the interface with React <code>PropTypes</code>:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// MapView.js
|
||||
</span>import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
</span>import React from <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
import <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
class <span class="token class-name">MapView</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
Reference in New Issue
Block a user