mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Travis CI
98 lines
34 KiB
HTML
98 lines
34 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Native UI Components (Android) – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Native UI Components (Android) – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li></ul><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-ios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-android.html#content">Native Modules (Android)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components (iOS)</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/native-components-android.html#content">Native UI Components (Android)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device (Android)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchandroid.html#content">SwitchAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Native UI Components (Android)</h1><div><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.</p><p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>ImageView</code>component available in the core React Native library.</p><h2><a class="anchor" name="imageview-example"></a>ImageView example <a class="hash-link" href="#imageview-example">#</a></h2><p>For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.</p><p>Native views are created and manipulated by extending <code>ViewManager</code> or more commonly <code>SimpleViewManager</code> . A <code>SimpleViewManager</code> is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout. An example of when you would use <code>ViewManager</code> instead is when wrapping a component with FrameLayout, such as ProgressBar.</p><p>These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the <code>NativeViewHierarchyManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>ViewManagers</code> are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p><p>Vending a view is simple:</p><ol><li>Create the ViewManager subclass.</li><li>Annotate the view properties with <code>@UIProp</code></li><li>Implement the <code>createViewInstance</code> method</li><li>Implement the <code>updateView</code> method</li><li>Register the manager in <code>createViewManagers</code> of the applications package.</li><li>Implement the JavaScript module</li></ol><h2><a class="anchor" name="1-create-the-viewmanager-subclass"></a>1. Create the <code>ViewManager</code> subclass <a class="hash-link" href="#1-create-the-viewmanager-subclass">#</a></h2><p>In this example we create view manager class <code>ReactImageManager</code> that extends <code>SimpleViewManager</code> of type <code>ReactImageView</code>. <code>ReactImageView</code> is the type of object managed by the manager, this will be the custom native view. Name returned by <code>getName</code> is used to reference the native view type from JavaScript.</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||
|
||
public class <span class="token class-name">ReactImageManager</span> extends <span class="token class-name">SimpleViewManager</span><ReactImageView<span class="token operator">></span> <span class="token punctuation">{</span>
|
||
|
||
public static final String REACT_CLASS <span class="token operator">=</span> <span class="token string">"RCTImageView"</span><span class="token punctuation">;</span>
|
||
|
||
@Override
|
||
public String <span class="token function">getName<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> REACT_CLASS<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="2-annotate-the-view-properties"></a>2. Annotate the view properties <a class="hash-link" href="#2-annotate-the-view-properties">#</a></h2><p>Properties that are to be reflected in JavaScript are annotated with <code>@UIProp</code>. The types currently supported are <code>BOOLEAN</code>, <code>NUMBER</code>, <code>STRING</code>, <code>MAP</code> and <code>ARRAY</code>. Each property is declared as a public static final String and its assigned value will be the name of the property in JavaScript.</p><div class="prism language-javascript"> @<span class="token function">UIProp<span class="token punctuation">(</span></span>UIProp<span class="token punctuation">.</span>Type<span class="token punctuation">.</span>STRING<span class="token punctuation">)</span>
|
||
public static final String PROP_SRC <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">;</span>
|
||
@<span class="token function">UIProp<span class="token punctuation">(</span></span>UIProp<span class="token punctuation">.</span>Type<span class="token punctuation">.</span>NUMBER<span class="token punctuation">)</span>
|
||
public static final String PROP_BORDER_RADIUS <span class="token operator">=</span> <span class="token string">"borderRadius"</span><span class="token punctuation">;</span>
|
||
@<span class="token function">UIProp<span class="token punctuation">(</span></span>UIProp<span class="token punctuation">.</span>Type<span class="token punctuation">.</span>STRING<span class="token punctuation">)</span>
|
||
public static final String PROP_RESIZE_MODE <span class="token operator">=</span> ViewProps<span class="token punctuation">.</span>RESIZE_MODE<span class="token punctuation">;</span></div><h2><a class="anchor" name="3-implement-method-createviewinstance"></a>3. Implement method <code>createViewInstance</code> <a class="hash-link" href="#3-implement-method-createviewinstance">#</a></h2><p>Views are created in the <code>createViewInstance</code> method, the view should initialize itself in its default state, any properties will be set via a follow up call to <code>updateView.</code></p><div class="prism language-javascript"> @Override
|
||
public ReactImageView <span class="token function">createViewInstance<span class="token punctuation">(</span></span>ThemedReactContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ReactImageView</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> Fresco<span class="token punctuation">.</span><span class="token function">newDraweeControllerBuilder<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> mCallerContext<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="4-implement-method-updateview"></a>4. Implement method <code>updateView</code> <a class="hash-link" href="#4-implement-method-updateview">#</a></h2><p>Setting properties on a view is not handled by automatically calling setter methods as it is on iOS; for Android, you manually invoke the setters via the <code>updateView</code> of your <code>ViewManager</code>. Values are fetched from the <code>CatalystStylesDiffMap</code> and dispatched to the <code>View</code> instance as required. It is up to a combination of <code>updateView</code> and the <code>View</code> class to check the validity of the properties and behave accordingly.</p><div class="prism language-javascript"> @Override
|
||
public void <span class="token function">updateView<span class="token punctuation">(</span></span>final ReactImageView view<span class="token punctuation">,</span>
|
||
final CatalystStylesDiffMap props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
super<span class="token punctuation">.</span><span class="token function">updateView<span class="token punctuation">(</span></span>view<span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_RESIZE_MODE<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
view<span class="token punctuation">.</span><span class="token function">setScaleType<span class="token punctuation">(</span></span>
|
||
ImageResizeMode<span class="token punctuation">.</span><span class="token function">toScaleType<span class="token punctuation">(</span></span>props<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span>PROP_RESIZE_MODE<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 keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_SRC<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
view<span class="token punctuation">.</span><span class="token function">setSource<span class="token punctuation">(</span></span>props<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span>PROP_SRC<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_BORDER_RADIUS<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
view<span class="token punctuation">.</span><span class="token function">setBorderRadius<span class="token punctuation">(</span></span>props<span class="token punctuation">.</span><span class="token function">getFloat<span class="token punctuation">(</span></span>PROP_BORDER_RADIUS<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">.</span>0f<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><span class="token function">maybeUpdateView<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="5-register-the-viewmanager"></a>5. Register the <code>ViewManager</code> <a class="hash-link" href="#5-register-the-viewmanager">#</a></h2><p>The final Java step is to register the ViewManager to the application, this happens in a similar way to <a href="NativeModulesAndroid.md" target="_blank">Native Modules</a>, via the applications package member function <code>createViewManagers.</code></p><div class="prism language-javascript"> @Override
|
||
public List<ViewManager<span class="token operator">></span> <span class="token function">createViewManagers<span class="token punctuation">(</span></span>
|
||
ReactApplicationContext reactContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> Arrays<span class="token punctuation">.</span><ViewManager<span class="token operator">></span><span class="token function">asList<span class="token punctuation">(</span></span>
|
||
<span class="token keyword">new</span> <span class="token class-name">ReactImageManager</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></div><h2><a class="anchor" name="6-implement-the-javascript-module"></a>6. Implement the JavaScript module <a class="hash-link" href="#6-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>
|
||
<span class="token keyword">var</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</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>
|
||
propTypes<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
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">'cover'</span><span class="token punctuation">,</span> <span class="token string">'contain'</span><span class="token punctuation">,</span> <span class="token string">'stretch'</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>
|
||
|
||
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">'RCTImageView'</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's use of the native view.</p><h1><a class="anchor" name="events"></a>Events <a class="hash-link" href="#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>
|
||
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||
public void <span class="token function">onReceiveNativeEvent<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
WritableMap event <span class="token operator">=</span> Arguments<span class="token punctuation">.</span><span class="token function">createMap<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
event<span class="token punctuation">.</span><span class="token function">putString<span class="token punctuation">(</span></span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token string">"MyMessage"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
ReactContext reactContext <span class="token operator">=</span> <span class="token punctuation">(</span>ReactContext<span class="token punctuation">)</span><span class="token function">getContext<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
reactContext<span class="token punctuation">.</span><span class="token function">getJSModule<span class="token punctuation">(</span></span>RCTEventEmitter<span class="token punctuation">.</span>class<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">receiveEvent<span class="token punctuation">(</span></span>
|
||
<span class="token function">getId<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token string">"topChange"</span><span class="token punctuation">,</span>
|
||
event<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></div><p>The event name <code>topChange</code> maps to the <code>onChange</code> callback prop in JavaScript (mappings are in <code>UIManagerModuleConstants.java</code>). This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// MyCustomView.js
|
||
</span>
|
||
class <span class="token class-name">MyCustomView</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">constructor<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>_onChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token function">_onChange<span class="token punctuation">(</span></span>event<span class="token punctuation">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChange<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange<span class="token punctuation">(</span></span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</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>
|
||
<span class="token keyword">return</span> <RCTMyCustomView <span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
MyCustomView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<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>
|
||
<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></div></div><div class="docs-prevnext"><a class="docs-next" href="direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
</script></body></html> |