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

Deploy website

Browse Source 
Deploy website version based on f76f9c7067f792d08dc3c18dc8f5eede53978566
This commit is contained in:
Website Deployment Script
2019-05-31 09:19:34 +00:00
parent 1e93b69cfd
commit cb58c7eb03
2 changed files with 114 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/native-components-ios.html
+57
View File
@@ -390,6 +390,63 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="handling-multiple-native-views"></a><a href="#handling-multiple-native-views" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Handling multiple native views</h2>
<p>A React Native view can have more than one child view in the view tree eg.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
</code></pre>
<p>In this example, the class <code>MyNativeView</code> is a wrapper for a <code>NativeComponent</code> and exposes methods, which will be called on the iOS platform. <code>MyNativeView</code> is defined in <code>MyNativeView.ios.js</code> and contains proxy methods of <code>NativeComponent</code>.</p>
<p>When the user interacts with the component, like clicking the button, the <code>backgroundColor</code> of <code>MyNativeView</code> changes. In this case <code>UIManager</code> would not know which <code>MyNativeView</code> should be handled and which one should change <code>backgroundColor</code>. Below you will find a solution to this problem:</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference2<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">.</span><span class="token function">callNativeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
</code></pre>
<p>Now the above component has a reference to a particular <code>MyNativeView</code> which allows us to use a specific instance of <code>MyNativeView</code>. Now the button can control which <code>MyNativeView</code> should change its <code>backgroundColor</code>. In this example let's assume that <code>callNativeMethod</code> changes <code>backgroundColor</code>.</p>
<p><code>MyNativeView.ios.js</code> contains code as follow:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyNativeView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>
<span class="token function-variable function">callNativeMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
UIManager<span class="token punctuation">.</span><span class="token function">dispatchViewManagerCommand</span><span class="token punctuation">(</span>
ReactNative<span class="token punctuation">.</span><span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
UIManager<span class="token punctuation">.</span><span class="token function">getViewManagerConfig</span><span class="token punctuation">(</span><span class="token string">'RNCMyNativeView'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Commands
<span class="token punctuation">.</span>callNativeMethod<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>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NativeComponent</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">NATIVE_COMPONENT_REF</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
<ul>
<li>(nonnull NSNumber *)reactTag  -  id of react view.</li>
<li>commandID:(NSInteger)commandID  -  Id of the native method that should be called</li>
<li>commandArgs:(NSArray<id> *)commandArgs  -  Args of the native method that we can pass from JS to native.</li>
</ul>
<p><code>RNCMyNativeViewManager.m</code></p>
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTViewManager.h&gt;</span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTUIManager.h&gt;</span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTLog.h&gt;</span></span>
RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <span class="hljs-built_in">NSNumber</span>*) reactTag) {
[<span class="hljs-keyword">self</span>.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, <span class="hljs-built_in">NSDictionary</span>&lt;<span class="hljs-built_in">NSNumber</span> *,<span class="hljs-built_in">UIView</span> *&gt; *viewRegistry) {
NativeView *view = viewRegistry[reactTag];
<span class="hljs-keyword">if</span> (!view || ![view isKindOfClass:[NativeView <span class="hljs-keyword">class</span>]]) {
RCTLogError(<span class="hljs-string">@"Cannot find NativeView with tag #%@"</span>, reactTag);
<span class="hljs-keyword">return</span>;
}
[view callNativeMethod];
}];
}
</code></pre>
<p>Here the <code>callNativeMethod</code> is defined in the <code>RNCMyNativeViewManager.m</code> file and contains only one parameter which is <code>(nonnull NSNumber*) reactTag</code>. This exported function will find a particular view using <code>addUIBlock</code> which contains the <code>viewRegistry</code> parameter and returns the component based on <code>reactTag</code> allowing it to call the method on the correct component.</p>
<h2><a class="anchor" aria-hidden="true" id="styles"></a><a href="#styles" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styles</h2>
<p>Since all our native react views are subclasses of <code>UIView</code>, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example <code>UIDatePicker</code> which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. <code>DatePickerIOS</code> does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:</p>
<pre><code class="hljs css language-javascript"><span class="token comment">// DatePickerIOS.ios.js</span>
docs/next/native-components-ios/index.html
+57
View File
@@ -390,6 +390,63 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="handling-multiple-native-views"></a><a href="#handling-multiple-native-views" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Handling multiple native views</h2>
<p>A React Native view can have more than one child view in the view tree eg.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
</code></pre>
<p>In this example, the class <code>MyNativeView</code> is a wrapper for a <code>NativeComponent</code> and exposes methods, which will be called on the iOS platform. <code>MyNativeView</code> is defined in <code>MyNativeView.ios.js</code> and contains proxy methods of <code>NativeComponent</code>.</p>
<p>When the user interacts with the component, like clicking the button, the <code>backgroundColor</code> of <code>MyNativeView</code> changes. In this case <code>UIManager</code> would not know which <code>MyNativeView</code> should be handled and which one should change <code>backgroundColor</code>. Below you will find a solution to this problem:</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyNativeView</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference2<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">.</span><span class="token function">callNativeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
</code></pre>
<p>Now the above component has a reference to a particular <code>MyNativeView</code> which allows us to use a specific instance of <code>MyNativeView</code>. Now the button can control which <code>MyNativeView</code> should change its <code>backgroundColor</code>. In this example let's assume that <code>callNativeMethod</code> changes <code>backgroundColor</code>.</p>
<p><code>MyNativeView.ios.js</code> contains code as follow:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyNativeView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>
<span class="token function-variable function">callNativeMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
UIManager<span class="token punctuation">.</span><span class="token function">dispatchViewManagerCommand</span><span class="token punctuation">(</span>
ReactNative<span class="token punctuation">.</span><span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
UIManager<span class="token punctuation">.</span><span class="token function">getViewManagerConfig</span><span class="token punctuation">(</span><span class="token string">'RNCMyNativeView'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Commands
<span class="token punctuation">.</span>callNativeMethod<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>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NativeComponent</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">NATIVE_COMPONENT_REF</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
<ul>
<li>(nonnull NSNumber *)reactTag  -  id of react view.</li>
<li>commandID:(NSInteger)commandID  -  Id of the native method that should be called</li>
<li>commandArgs:(NSArray<id> *)commandArgs  -  Args of the native method that we can pass from JS to native.</li>
</ul>
<p><code>RNCMyNativeViewManager.m</code></p>
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTViewManager.h&gt;</span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTUIManager.h&gt;</span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">&lt;React/RCTLog.h&gt;</span></span>
RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <span class="hljs-built_in">NSNumber</span>*) reactTag) {
[<span class="hljs-keyword">self</span>.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, <span class="hljs-built_in">NSDictionary</span>&lt;<span class="hljs-built_in">NSNumber</span> *,<span class="hljs-built_in">UIView</span> *&gt; *viewRegistry) {
NativeView *view = viewRegistry[reactTag];
<span class="hljs-keyword">if</span> (!view || ![view isKindOfClass:[NativeView <span class="hljs-keyword">class</span>]]) {
RCTLogError(<span class="hljs-string">@"Cannot find NativeView with tag #%@"</span>, reactTag);
<span class="hljs-keyword">return</span>;
}
[view callNativeMethod];
}];
}
</code></pre>
<p>Here the <code>callNativeMethod</code> is defined in the <code>RNCMyNativeViewManager.m</code> file and contains only one parameter which is <code>(nonnull NSNumber*) reactTag</code>. This exported function will find a particular view using <code>addUIBlock</code> which contains the <code>viewRegistry</code> parameter and returns the component based on <code>reactTag</code> allowing it to call the method on the correct component.</p>
<h2><a class="anchor" aria-hidden="true" id="styles"></a><a href="#styles" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Styles</h2>
<p>Since all our native react views are subclasses of <code>UIView</code>, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example <code>UIDatePicker</code> which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. <code>DatePickerIOS</code> does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:</p>
<pre><code class="hljs css language-javascript"><span class="token comment">// DatePickerIOS.ios.js</span>