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
2016-04-29 16:04:15 +00:00
parent 75fe1dabac
commit eb96d242f2
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/native-components-android.html
+3 -2
View File
@@ -32,7 +32,7 @@ public class <span class="token class-name">ReactImageManager</span> extends <sp
<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> PropTypes <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> requireNativeComponent<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <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>
name<span class="token punctuation">:</span> <span class="token string">&#x27;ImageView&#x27;</span><span class="token punctuation">,</span>
@@ -40,7 +40,8 @@ import <span class="token punctuation">{</span> requireNativeComponent <span cla
src<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
borderRadius<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">,</span>
resizeMode<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">oneOf<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">&#x27;cover&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;contain&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;stretch&#x27;</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 punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>View<span class="token punctuation">.</span>propTypes<span class="token comment" spellcheck="true"> // include the default view properties
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</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">&#x27;RCTImageView&#x27;</span><span class="token punctuation">,</span> iface<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>requireNativeComponent</code> commonly takes two parameters, the first is the name of the native view and the second is an object that describes the component interface. The component interface should declare a friendly <code>name</code> for use in debug messages and must declare the <code>propTypes</code> reflected by the Native View. The <code>propTypes</code> are used for checking the validity of a user&#x27;s use of the native view. Note that if you need your JavaScript component to do more than just specify a name and propTypes, like do custom event handling, you can wrap the native component in a normal react component. In that case, you want to pass in the wrapper component instead of <code>iface</code> to <code>requireNativeComponent</code>. This is illustrated in the <code>MyCustomView</code> example below.</p><h1><a class="anchor" name="events"></a>Events <a class="hash-link" href="docs/native-components-android.html#events">#</a></h1><p>So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p><div class="prism language-javascript">class <span class="token class-name">MyCustomView</span> extends <span class="token class-name">View</span> <span class="token punctuation">{</span>
releases/next/showcase.html
+1 -1
View File
File diff suppressed because one or more lines are too long