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

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2017-06-22 21:20:58 +00:00
parent a911a6ea11
commit 516fa0c445
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/native-components-android.html
+2 -2
View File
@@ -31,7 +31,7 @@
<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-js"><span class="token comment" spellcheck="true">// ImageView.js
</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">&#x27;prop-types&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> iface <span class="token operator">=</span> <span class="token punctuation">{</span>
@@ -76,7 +76,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token
<span class="token comment" spellcheck="true">/**
* Callback that is called continuously when the user is dragging the map.
*/</span>
onChangeMessage<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
onChangeMessage<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
releases/next/docs/native-components-ios.html
+10 -9
View File
@@ -23,7 +23,8 @@
</span>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">&#x27;RNTMap&#x27;</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&#x27;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&#x27;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-objectivec"><span class="token comment" spellcheck="true">// RNTMapManager.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 &quot;RedBox&quot; 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><span class="token operator">&lt;</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">&gt;</span></div><p>This isn&#x27;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&#x27;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><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
</span><span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">&#x27;prop-types&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">MapView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
@@ -40,7 +41,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
* angle is ignored and the map is always displayed as if the user
* is looking straight down onto it.
*/</span>
pitchEnabled<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
pitchEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> RNTMap <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">&#x27;RNTMap&#x27;</span><span class="token punctuation">,</span> MapView<span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -92,7 +93,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
* angle is ignored and the map is always displayed as if the user
* is looking straight down onto it.
*/</span>
pitchEnabled<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
pitchEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">/**
* The region to be displayed by the map.
@@ -100,19 +101,19 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
* The region is defined by the center coordinates and the span of
* coordinates to display.
*/</span>
region<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
region<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/**
* Coordinates for the center of the map.
*/</span>
latitude<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitude<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
latitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
<span class="token comment" spellcheck="true">/**
* Distance between the minimum and the maximum latitude/longitude
* to be displayed.
*/</span>
latitudeDelta<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitudeDelta<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
latitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<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><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
@@ -207,7 +208,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
<span class="token comment" spellcheck="true">/**
* Callback that is called continuously when the user is dragging the map.
*/</span>
onChange<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
onChange<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>