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-08-16 18:21:34 +00:00
parent 4cb4489a00
commit f5f97a6049
2 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/integration-with-existing-apps.html
+1 -1
View File
@@ -42,7 +42,7 @@ block { display: none; }
</span><h3><a class="anchor" name="general"></a>General <a class="hash-link" href="docs/integration-with-existing-apps.html#general">#</a></h3><p>First, follow the <a href="/react-native/docs/getting-started.html" target="">Getting Started guide</a> for your development environment and the iOS target platform to install the prerequisites for React Native.</p><h3><a class="anchor" name="cocoapods"></a>CocoaPods <a class="hash-link" href="docs/integration-with-existing-apps.html#cocoapods">#</a></h3><p><a href="http://cocoapods.org" target="_blank">CocoaPods</a> is a package management tool for iOS and Mac development. We use it to add the actual React Native framework code locally into your current project.</p><div class="prism language-javascript">$ sudo gem install cocoapods</div><blockquote><p>It is technically possible not to use CocoaPods, but this requires manual library and linker additions that overly complicates this process.</p></blockquote><h2><a class="anchor" name="our-sample-app"></a>Our Sample App <a class="hash-link" href="docs/integration-with-existing-apps.html#our-sample-app">#</a></h2><span><block class="objc" />
</span><p>Assume the <a href="https://github.com/JoelMarcey/iOS-2048" target="_blank">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_(video_game" target="_blank">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p><span><block class="swift" />
</span><p>Assume the <a href="https://github.com/JoelMarcey/iOS-2048" target="_blank">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_(video_game" target="_blank">2048</a>) game. Here is what the main menu of the native application looks like without React Native.</p><span><block class="swift" />
</span><p>Assume the <a href="https://github.com/JoelMarcey/swift-2048" target="_blank">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_(video_game" target="_blank">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p><span><block class="objc swift" />
releases/next/docs/listview.html
+17 -14
View File
@@ -3,21 +3,24 @@ scrolling lists of changing data. The minimal API is to create a
<a href="docs/listviewdatasource.html" target="_blank"><code>ListView.DataSource</code></a>, populate it with a simple
array of data blobs, and instantiate a <code>ListView</code> component with that data
source and a <code>renderRow</code> callback which takes a blob from the data array and
returns a renderable component.</p><p>Minimal example:</p><div class="prism language-javascript">getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>r1<span class="token punctuation">,</span> r2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> r1 <span class="token operator">!</span><span class="token operator">==</span> r2<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> ds<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">&#x27;row 1&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;row 2&#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>
returns a renderable component.</p><p>Minimal example:</p><div class="prism language-javascript">class <span class="token class-name">MyComponent</span> extends <span class="token class-name">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 function">super<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>r1<span class="token punctuation">,</span> r2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> r1 <span class="token operator">!</span><span class="token operator">==</span> r2<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>state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> ds<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span><span class="token punctuation">[</span><span class="token string">&#x27;row 1&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;row 2&#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>
render<span class="token punctuation">:</span> <span class="token keyword">function</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 punctuation">(</span>
&lt;ListView
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>rowData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>rowData<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>ListView also supports more advanced features, including sections with sticky
<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> <span class="token punctuation">(</span>
&lt;ListView
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>rowData<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>rowData<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>ListView also supports more advanced features, including sections with sticky
section headers, header and footer support, callbacks on reaching the end of
the available data (<code>onEndReached</code>) and on the set of rows that are visible
in the device viewport change (<code>onChangeVisibleRows</code>), and several