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

update website

Browse Source
This commit is contained in:
Christopher Chedeau
2015-03-24 20:54:37 -07:00
parent 3daabbb1bb
commit 17274257ee
44 changed files with 206 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_index.html
+49 -1
View File
@@ -1,4 +1,52 @@
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build 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"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png"><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/logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><div class="hero"><div class="wrap"><div class="text"><strong>React Native</strong></div><div class="minitext">Build native apps using React</div></div></div><section class="content wrap"><section class="home-bottom-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Learn more about React Native</a></div></section><p></p></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build 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"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png"><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/logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><div class="hero"><div class="wrap"><div class="text"><strong>React Native</strong></div><div class="minitext">Build native apps using React</div></div></div><section class="content wrap"><section class="home-bottom-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Learn more about React Native</a></div></section><h2>Native iOS Components</h2><p>With React Native, you can use the platform components such as iOS UITabBar and UINavigationController.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> TabBarIOS<span class="token punctuation">,</span> NavigatorIOS <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></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;TabBarIOS<span class="token operator">&gt;</span>
&lt;TabBarIOS<span class="token punctuation">.</span>Item title<span class="token operator">=</span><span class="token string">&quot;React Native&quot;</span> selected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;NavigatorIOS initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">&#x27;React Native&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TabBarIOS<span class="token punctuation">.</span>Item<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TabBarIOS<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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2>Async</h2><p>Decoding images off of the main thread... Asynchronous bridge, Chrome Dev Tools...</p><h2>Touch Handling</h2><p>iOS has a very powerful system called Responder to handle touches which the web lacks. React Native implements iOS responder system and provides high level components such as TouchableHighlight that work well right off the bat.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> ScrollView<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></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;ScrollView<span class="token operator">&gt;</span>
&lt;TouchableHighlight underlayColor<span class="token operator">=</span><span class="token string">&quot;#cccccc&quot;</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Proper Touch Handling&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>ScrollView<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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2>Flexbox</h2><p>Laying out views should be easy</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> Image<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></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;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;http://facebook.github.io/react/img/logo_og.png&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>image<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>text<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&gt;</span>React Native&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>subtitle<span class="token punctuation">}</span><span class="token operator">&gt;</span>Build high quality mobile apps using React&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
row<span class="token punctuation">:</span> <span class="token punctuation">{</span> flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span> margin<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
image<span class="token punctuation">:</span> <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> marginRight<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
text<span class="token punctuation">:</span> <span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;bold&#x27;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
subtitle<span class="token punctuation">:</span> <span class="token punctuation">{</span> fontSize<span class="token punctuation">:</span> <span class="token number">10</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>Polyfills</h2><p>React Native attempts to innovate on the view layer, for the rest, it polyfills web standards. You can use npm to install JavaScript dependencies, XMLHttpRequest, requestAnimationFrame, navigator.geolocation...</p></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)
docs/activityindicatorios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/alertios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/animation.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/appregistry.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/appstate.html
-12
View File
File diff suppressed because one or more lines are too long
docs/appstateios.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/asyncstorage.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/cameraroll.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/datepickerios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/flexbox.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/getting-started.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/image.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/interactionmanager.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/layoutanimation.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/listview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/mapview.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/nativemodulesios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/navigatorios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/netinfo.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/network.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/panresponder.html
+83
View File
File diff suppressed because one or more lines are too long
docs/pickerios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/pixelratio.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/pixels.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/pushnotificationios.html
+14
View File
File diff suppressed because one or more lines are too long
docs/reactnavigator.html
+14
View File
File diff suppressed because one or more lines are too long
docs/scrollview.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/sliderios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/statusbarios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/style.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/stylesheet.html
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/switchios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/tabbarios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/text.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/textinput.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/timers.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchablehighlight.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchableopacity.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/touchablewithoutfeedback.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/vibrationios.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/videos.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/view.html
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/webview.html
+1 -1
View File
File diff suppressed because one or more lines are too long