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:
Travis CI
2015-05-13 21:51:36 +00:00
parent 3a5d45b9f0
commit 525f61b438
7 changed files with 121 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/alertios.html
+95 -3
View File
@@ -10,8 +10,11 @@ it will appear bold.</p><div class="prism language-javascript">AlertIOS<span cla
<span class="token punctuation">]</span>
<span class="token punctuation">)</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alert"></a><span class="propType">static </span>alert<span class="propType">(title: string, message?: string, buttons?: Array&lt;{
text: ?string;
onPress: ?Function;
}&gt;)</span> <a class="hash-link" href="#alert">#</a></h4></div></div></span></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertIOSExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
onPress?: ?Function;
}&gt;, type?: string)</span> <a class="hash-link" href="#alert">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="propType">static </span>prompt<span class="propType">(title: string, value?: string, buttons?: Array&lt;{
text: ?string;
onPress?: ?Function;
}&gt;, callback?: Function)</span> <a class="hash-link" href="#prompt">#</a></h4></div></div></span></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertIOSExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<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>
@@ -93,9 +96,98 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
&lt;<span class="token operator">/</span>TouchableHighlight<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 punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Prompt&#x27;</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> React<span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
<span class="token keyword">return</span> &lt;PromptExample <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>
class <span class="token class-name">PromptExample</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>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse<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 keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
promptValue<span class="token punctuation">:</span> undefined<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>title <span class="token operator">=</span> <span class="token string">&#x27;Type a value&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue <span class="token operator">=</span> <span class="token string">&#x27;Default value&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>buttons <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;Custom cancel&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;Custom OK&#x27;</span><span class="token punctuation">,</span>
onPress<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse
<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 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;View<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</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><span class="token operator">&gt;</span>Prompt value<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 keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>promptValue<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;TouchableHighlight
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>prompt<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 keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse<span class="token punctuation">)</span><span class="token punctuation">}</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>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
prompt <span class="token keyword">with</span> title &amp; callback
&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>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>prompt<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 keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>buttons<span class="token punctuation">)</span><span class="token punctuation">}</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>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
prompt <span class="token keyword">with</span> title &amp; custom buttons
&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>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>prompt<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 keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse<span class="token punctuation">)</span><span class="token punctuation">}</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>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
prompt <span class="token keyword">with</span> title<span class="token punctuation">,</span> default value &amp; callback
&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>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>prompt<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 keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>buttons<span class="token punctuation">)</span><span class="token punctuation">}</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>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
prompt <span class="token keyword">with</span> title<span class="token punctuation">,</span> default value &amp; custom buttons
&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>TouchableHighlight<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 function">prompt<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Flow&#x27;s apply support is broken: #7035621
</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>AlertIOS<span class="token punctuation">.</span>prompt<span class="token punctuation">:</span> any<span class="token punctuation">)</span><span class="token punctuation">.</span>apply<span class="token punctuation">:</span> any<span class="token punctuation">)</span><span class="token punctuation">(</span>AlertIOS<span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">promptResponse<span class="token punctuation">(</span></span>promptValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span> promptValue <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>
wrapper<span class="token punctuation">:</span> <span class="token punctuation">{</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
docs/mapview.html
+1 -1
View File
@@ -169,7 +169,7 @@ Default <code>value</code> is true.</p></div></div></div></div><div><h3><a class
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;MapRegionInput
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRegionInputChanged<span class="token punctuation">}</span>
region<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>mapRegionInput<span class="token punctuation">}</span>
region<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>mapRegionInput <span class="token operator">||</span> undefined<span class="token punctuation">}</span>
<span class="token operator">/</span><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>
docs/navigator.html
+1 -1
View File
@@ -48,7 +48,7 @@ a route in the <code>initialRouteStack</code> if both props are provided. The
is provided. Otherwise, it will default to an array containing only the
<code>initialRoute</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbar"></a>navigationBar <span class="propType">node</span> <a class="hash-link" href="#navigationbar">#</a></h4><div><p>Optionally provide a navigation bar that persists across scene
transitions</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="#navigator">#</a></h4><div><p>Optionally provide the navigator object from a parent Navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="#ondidfocus">#</a></h4><div><p>Will be called with the new route of each scene after the transition is
complete or after the initial mounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onitemref"></a>onItemRef <span class="propType">function</span> <a class="hash-link" href="#onitemref">#</a></h4><div><p>Will be called with (ref, indexInStack) when the scene ref changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="#onwillfocus">#</a></h4><div><p>Will emit the target route upon mounting and before each nav transition</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
complete or after the initial mounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onitemref"></a>onItemRef <span class="propType">function</span> <a class="hash-link" href="#onitemref">#</a></h4><div><p>Will be called with (ref, indexInStack, route) when the scene ref changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="#onwillfocus">#</a></h4><div><p>Will emit the target route upon mounting and before each nav transition</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
invoked with the route and the navigator object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
&lt;MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="navigatorios.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(){
docs/pixelratio.html
+1 -1
View File
@@ -6,7 +6,7 @@ by the pixel ratio.</p><div class="prism language-javascript"><span class="token
width<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize<span class="token punctuation">(</span></span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize<span class="token punctuation">(</span></span><span class="token number">100</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>
&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="get"></a><span class="propType">static </span>get<span class="propType">()</span> <a class="hash-link" href="#get">#</a></h4><div><p>Returns the device pixel density. Some examples:</p><ul><li>PixelRatio.get() === 2<ul><li>iPhone 4, 4S</li><li>iPhone 5, 5c, 5s</li><li>iPhone 6</li></ul></li><li>PixelRatio.get() === 3<ul><li>iPhone 6 plus</li></ul></li><li>PixelRatio.get() === 3.5<ul><li>Nexus 6</li></ul></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="propType">static </span>getPixelSizeForLayoutSize<span class="propType">(layoutSize: number)</span> <a class="hash-link" href="#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div></div></span></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you&#x27;re going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It&#x27;s only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-next" href="pushnotificationios.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>
&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="get"></a><span class="propType">static </span>get<span class="propType">()</span> <a class="hash-link" href="#get">#</a></h4><div><p>Returns the device pixel density. Some examples:</p><ul><li>PixelRatio.get() === 2<ul><li>iPhone 4, 4S</li><li>iPhone 5, 5c, 5s</li><li>iPhone 6</li></ul></li><li>PixelRatio.get() === 3<ul><li>iPhone 6 plus</li></ul></li><li>PixelRatio.get() === 3.5<ul><li>Nexus 6</li></ul></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="propType">static </span>getPixelSizeForLayoutSize<span class="propType">(layoutSize: number)</span> <a class="hash-link" href="#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startdetecting"></a><span class="propType">static </span>startDetecting<span class="propType">()</span> <a class="hash-link" href="#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you&#x27;re going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It&#x27;s only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-next" href="pushnotificationios.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)
docs/scrollview.html
+1 -1
View File
@@ -46,7 +46,7 @@ The default value is true.</p></div></div><div class="prop"><h4 class="propTitle
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<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>
docs/text.html
+21 -1
View File
@@ -27,7 +27,7 @@ each other on account of the literal newlines:</p><div class="prism language-jav
layout, including line wrapping, such that the total number of lines does
not exceed this number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>This function is called on press. Text intrinsically supports press
handling with a default highlight state (which can be disabled with
<code>suppressHighlighting</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">containerBackgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum(&#x27;normal&#x27;, &#x27;italic&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&quot;normal&quot;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&quot;auto&quot;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum(&quot;auto&quot;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
<code>suppressHighlighting</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">containerBackgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum(&#x27;normal&#x27;, &#x27;italic&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&quot;normal&quot;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">letterSpacing <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&quot;auto&quot;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">writingDirection <span class="propType">enum(&quot;auto&quot;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
default, a gray oval highlights the text on press down.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="description"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Text.md">Edit on GitHub</a>Description <a class="hash-link" href="#description">#</a></h3><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="#nested-text">#</a></h2><p>In iOS, the way to display formatted text is by using <code>NSAttributedString</code>: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="prism language-javascript">&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</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><span class="token operator">&gt;</span>
I am bold
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">&#x27;red&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
@@ -279,6 +279,26 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
&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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Letter Spacing&#x27;</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<span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
letterSpacing <span class="token operator">=</span> <span class="token number">0</span>
&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><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
letterSpacing <span class="token operator">=</span> <span class="token number">2</span>
&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><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
letterSpacing <span class="token operator">=</span> <span class="token number">9</span>
&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><span class="token punctuation">{</span>letterSpacing<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
letterSpacing <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span>
&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>
<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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Spaces&#x27;</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>
docs/view.html
+1 -1
View File
@@ -41,7 +41,7 @@ view doesn&#x27;t have to be redrawn and display lists don&#x27;t need to be
re-executed. The texture can just be re-used and re-composited with
different parameters. The downside is that this can use up limited video
memory, so this prop should be set back to false at the end of the
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span></h6></div><div class="prop"><h6 class="propTitle">shadowColor <span class="propType">string</span></h6></div><div class="prop"><h6 class="propTitle">shadowOffset <span class="propType">{width: number, height: number}</span></h6></div><div class="prop"><h6 class="propTitle">shadowOpacity <span class="propType">number</span></h6></div><div class="prop"><h6 class="propTitle">shadowRadius <span class="propType">number</span></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<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>