mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
Travis CI
@@ -14,7 +14,8 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@end</div><p>Now from your JavaScript file you can call the method like this:</p><div class="prism language-javascript"><span class="token keyword">var</span> CalendarManager <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'NativeModules'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>CalendarManager<span class="token punctuation">;</span>
|
||||
CalendarManager<span class="token punctuation">.</span><span class="token function">addEvent<span class="token punctuation">(</span></span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>The return type of bridge methods is always <code>void</code>. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).</p><h2><a class="anchor" name="argument-types"></a>Argument types <a class="hash-link" href="#argument-types">#</a></h2><p>React Native supports several types of arguments that can be passed from JavaScript code to native module:</p><ul><li>string (<code>NSString</code>)</li><li>number (<code>NSInteger</code>, <code>float</code>, <code>double</code>, <code>CGFloat</code>, <code>NSNumber</code>)</li><li>boolean (<code>BOOL</code>, <code>NSNumber</code>)</li><li>array (<code>NSArray</code>) of any types from this list</li><li>map (<code>NSDictionary</code>) with string keys and values of any type from this list</li><li>function (<code>RCTResponseSenderBlock</code>)</li></ul><p>In our <code>CalendarManager</code> example, if we want to pass event date to native, we have to convert it to a string or a number:</p><div class="prism language-javascript"><span class="token function">RCT_EXPORT_METHOD<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>NSInteger<span class="token punctuation">)</span>secondsSinceUnixEpoch<span class="token punctuation">)</span>
|
||||
CalendarManager<span class="token punctuation">.</span><span class="token function">addEvent<span class="token punctuation">(</span></span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><blockquote><p><strong>NOTE:</strong> JavaScript method names
|
||||
The name of the method exported to JavaScript is the native method's name up to the first colon. React Native also defines a macro called <code>RCT_REMAP_METHOD</code> to specify the JavaScript method's name. This is useful when multiple native methods are the same up to the first colon and would have conflicting JavaScript names.</p></blockquote><p>The return type of bridge methods is always <code>void</code>. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).</p><h2><a class="anchor" name="argument-types"></a>Argument types <a class="hash-link" href="#argument-types">#</a></h2><p>React Native supports several types of arguments that can be passed from JavaScript code to native module:</p><ul><li>string (<code>NSString</code>)</li><li>number (<code>NSInteger</code>, <code>float</code>, <code>double</code>, <code>CGFloat</code>, <code>NSNumber</code>)</li><li>boolean (<code>BOOL</code>, <code>NSNumber</code>)</li><li>array (<code>NSArray</code>) of any types from this list</li><li>map (<code>NSDictionary</code>) with string keys and values of any type from this list</li><li>function (<code>RCTResponseSenderBlock</code>)</li></ul><p>In our <code>CalendarManager</code> example, if we want to pass event date to native, we have to convert it to a string or a number:</p><div class="prism language-javascript"><span class="token function">RCT_EXPORT_METHOD<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>NSInteger<span class="token punctuation">)</span>secondsSinceUnixEpoch<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">{</span>
|
||||
NSDate <span class="token operator">*</span>date <span class="token operator">=</span> <span class="token punctuation">[</span>NSDate dateWithTimeIntervalSince1970<span class="token punctuation">:</span>secondsSinceUnixEpoch<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><p>As <code>CalendarManager.addEvent</code> method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:</p><div class="prism language-javascript">#import <span class="token string">"RCTConvert.h"</span>
|
||||
@@ -27,7 +28,7 @@ CalendarManager<span class="token punctuation">.</span><span class="token functi
|
||||
location<span class="token punctuation">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">toTime<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'...'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span></div><blockquote><p><strong>NOTE</strong>: About array and map</p><p>React Native doesn't provide any guarantees about the types of values in these structures. Your native module might expect an array of strings, but if JavaScript calls your method with an array containing numbers and strings, you'll get <code>NSArray</code> with <code>NSNumber</code> and <code>NSString</code>. It is the developer's responsibility to check array/map value types (see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h" target="_blank"><code>RCTConvert</code></a> for helper methods).</p></blockquote><h1><a class="anchor" name="callbacks"></a>Callbacks <a class="hash-link" href="#callbacks">#</a></h1><blockquote><p><strong>WARNING</strong></p><p>This section is even more experimental than others, we don't have a set of best practices around callbacks yet.</p></blockquote><p>Native module also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p><div class="prism language-javascript"><span class="token function">RCT_EXPORT_METHOD<span class="token punctuation">(</span></span>findEvents<span class="token punctuation">:</span><span class="token punctuation">(</span>RCTResponseSenderBlock<span class="token punctuation">)</span>callback<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span></div><blockquote><p><strong>NOTE</strong>: About array and map</p><p>React Native doesn't provide any guarantees about the types of values in these structures. Your native module might expect an array of strings, but if JavaScript calls your method with an array containing numbers and strings, you'll get <code>NSArray</code> with <code>NSNumber</code> and <code>NSString</code>. It is the developer's responsibility to check array/map value types (see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.h" target="_blank"><code>RCTConvert</code></a> for helper methods).</p></blockquote><h2><a class="anchor" name="callbacks"></a>Callbacks <a class="hash-link" href="#callbacks">#</a></h2><blockquote><p><strong>WARNING</strong></p><p>This section is even more experimental than others, we don't have a set of best practices around callbacks yet.</p></blockquote><p>Native module also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.</p><div class="prism language-javascript"><span class="token function">RCT_EXPORT_METHOD<span class="token punctuation">(</span></span>findEvents<span class="token punctuation">:</span><span class="token punctuation">(</span>RCTResponseSenderBlock<span class="token punctuation">)</span>callback<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">{</span>
|
||||
NSArray <span class="token operator">*</span>events <span class="token operator">=</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token function">callback<span class="token punctuation">(</span></span>@<span class="token punctuation">[</span><span class="token punctuation">[</span>NSNull <span class="token keyword">null</span><span class="token punctuation">]</span><span class="token punctuation">,</span> events<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
Reference in New Issue
Block a user