mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -25,12 +25,10 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<span class="token keyword">var</span> DESTRUCTIVE_INDEX <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> CANCEL_INDEX <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ActionSheetExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
clicked<span class="token punctuation">:</span> <span class="token string">'none'</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>
|
||||
class <span class="token class-name">ActionSheetExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
clicked<span class="token punctuation">:</span> <span class="token string">'none'</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>
|
||||
@@ -43,9 +41,9 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">showActionSheet<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showActionSheet <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
ActionSheetIOS<span class="token punctuation">.</span><span class="token function">showActionSheetWithOptions<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
options<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">,</span>
|
||||
cancelButtonIndex<span class="token punctuation">:</span> CANCEL_INDEX<span class="token punctuation">,</span>
|
||||
@@ -54,15 +52,13 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<span class="token punctuation">(</span>buttonIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> clicked<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">[</span>buttonIndex<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 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> ActionSheetTintExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
clicked<span class="token punctuation">:</span> <span class="token string">'none'</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>
|
||||
class <span class="token class-name">ActionSheetTintExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
clicked<span class="token punctuation">:</span> <span class="token string">'none'</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>
|
||||
@@ -75,9 +71,9 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">showActionSheet<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showActionSheet <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
ActionSheetIOS<span class="token punctuation">.</span><span class="token function">showActionSheetWithOptions<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
options<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">,</span>
|
||||
cancelButtonIndex<span class="token punctuation">:</span> CANCEL_INDEX<span class="token punctuation">,</span>
|
||||
@@ -87,15 +83,13 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<span class="token punctuation">(</span>buttonIndex<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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> clicked<span class="token punctuation">:</span> BUTTONS<span class="token punctuation">[</span>buttonIndex<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 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> ShareActionSheetExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
text<span class="token punctuation">:</span> <span class="token string">''</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">ShareActionSheetExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">''</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>
|
||||
@@ -108,9 +102,9 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">showShareActionSheet<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showShareActionSheet <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
ActionSheetIOS<span class="token punctuation">.</span><span class="token function">showShareActionSheetWithOptions<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
|
||||
message<span class="token punctuation">:</span> <span class="token string">'message to go with the shared url'</span><span class="token punctuation">,</span>
|
||||
@@ -129,15 +123,13 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<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>text<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 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> ShareScreenshotExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
text<span class="token punctuation">:</span> <span class="token string">''</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">ShareScreenshotExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">''</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>
|
||||
@@ -150,9 +142,9 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">showShareActionSheet<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showShareActionSheet <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Take the snapshot (returns a temp file uri)
|
||||
</span> UIManager<span class="token punctuation">.</span><span class="token function">takeSnapshot<span class="token punctuation">(</span></span><span class="token string">'window'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Share image data
|
||||
@@ -173,8 +165,8 @@ In this way, you can share images, videos, PDF files, etc.</p></div></div></div>
|
||||
<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>text<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 punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">alert<span class="token punctuation">(</span></span>error<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 punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> style <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>
|
||||
button<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -22,15 +22,13 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> AdSupportIOSExample <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
deviceID<span class="token punctuation">:</span> <span class="token string">'No IDFA yet'</span><span class="token punctuation">,</span>
|
||||
hasAdvertiserTracking<span class="token punctuation">:</span> <span class="token string">'unset'</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>
|
||||
class <span class="token class-name">AdSupportIOSExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
deviceID<span class="token punctuation">:</span> <span class="token string">'No IDFA yet'</span><span class="token punctuation">,</span>
|
||||
hasAdvertiserTracking<span class="token punctuation">:</span> <span class="token string">'unset'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
componentDidMount<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 function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AdSupportIOS<span class="token punctuation">.</span><span class="token function">getAdvertisingId<span class="token punctuation">(</span></span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_onDeviceIDSuccess<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_onDeviceIDFailure
|
||||
@@ -40,33 +38,33 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_onHasTrackingSuccess<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_onHasTrackingFailure
|
||||
<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>
|
||||
|
||||
_onHasTrackingSuccess<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>hasTracking<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onHasTrackingSuccess <span class="token operator">=</span> <span class="token punctuation">(</span>hasTracking<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
<span class="token string">'hasAdvertiserTracking'</span><span class="token punctuation">:</span> hasTracking<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>
|
||||
|
||||
_onHasTrackingFailure<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onHasTrackingFailure <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
<span class="token string">'hasAdvertiserTracking'</span><span class="token punctuation">:</span> <span class="token string">'Error!'</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>
|
||||
|
||||
_onDeviceIDSuccess<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>deviceID<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onDeviceIDSuccess <span class="token operator">=</span> <span class="token punctuation">(</span>deviceID<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
<span class="token string">'deviceID'</span><span class="token punctuation">:</span> deviceID<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>
|
||||
|
||||
_onDeviceIDFailure<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onDeviceIDFailure <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
<span class="token string">'deviceID'</span><span class="token punctuation">:</span> <span class="token string">'Error!'</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>
|
||||
|
||||
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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
@@ -80,7 +78,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -34,9 +34,8 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
|
||||
<span class="token comment" spellcheck="true">/**
|
||||
* Simple alert examples.
|
||||
*/</span>
|
||||
<span class="token keyword">var</span> SimpleAlertExampleBlock <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>
|
||||
class <span class="token class-name">SimpleAlertExampleBlock</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
<TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
|
||||
@@ -102,23 +101,23 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> AlertExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Alert'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Alerts display a concise and informative message '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'and prompt the user to make a decision.'</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>
|
||||
class <span class="token class-name">AlertExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'Alert'</span><span class="token punctuation">;</span>
|
||||
|
||||
static description <span class="token operator">=</span> <span class="token string">'Alerts display a concise and informative message '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'and prompt the user to make a decision.'</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>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'Alert'</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<SimpleAlertExampleBlock <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></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>
|
||||
wrapper<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -41,33 +41,36 @@ const <span class="token punctuation">{</span>
|
||||
View
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> AppStateSubscription <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
appState<span class="token punctuation">:</span> AppState<span class="token punctuation">.</span>currentState<span class="token punctuation">,</span>
|
||||
previousAppStates<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
memoryWarnings<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
componentDidMount<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>
|
||||
class <span class="token class-name">AppStateSubscription</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
appState<span class="token punctuation">:</span> AppState<span class="token punctuation">.</span>currentState<span class="token punctuation">,</span>
|
||||
previousAppStates<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
memoryWarnings<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span><span class="token string">'memoryWarning'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleMemoryWarning<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
componentWillUnmount<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 punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span><span class="token string">'memoryWarning'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleMemoryWarning<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleMemoryWarning<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 punctuation">}</span>
|
||||
|
||||
_handleMemoryWarning <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>memoryWarnings<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>memoryWarnings <span class="token operator">+</span> <span class="token number">1</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>
|
||||
_handleAppStateChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>appState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_handleAppStateChange <span class="token operator">=</span> <span class="token punctuation">(</span>appState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> previousAppStates <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>previousAppStates<span class="token punctuation">.</span><span class="token function">slice<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
previousAppStates<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>appState<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>
|
||||
appState<span class="token punctuation">,</span>
|
||||
previousAppStates<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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>showMemoryWarnings<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -89,7 +92,7 @@ const <span class="token punctuation">{</span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'AppState'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'app background status'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -130,12 +130,17 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token keyword">var</span> STORAGE_KEY <span class="token operator">=</span> <span class="token string">'@AsyncStorageExample:key'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> COLORS <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> BasicStorageExample <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>
|
||||
class <span class="token class-name">BasicStorageExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
selectedValue<span class="token punctuation">:</span> COLORS<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
messages<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">componentDidMount<span class="token punctuation">(</span></span><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">_loadInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></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>
|
||||
|
||||
async <span class="token function">_loadInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_loadInitialState <span class="token operator">=</span> async <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> value <span class="token operator">=</span> await AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem<span class="token punctuation">(</span></span>STORAGE_KEY<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!</span><span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
@@ -147,14 +152,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><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">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<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">getInitialState<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>
|
||||
selectedValue<span class="token punctuation">:</span> COLORS<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
messages<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 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">var</span> color <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<span class="token punctuation">;</span>
|
||||
@@ -186,9 +184,9 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>m<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <Text key<span class="token operator">=</span><span class="token punctuation">{</span>m<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>m<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
async <span class="token function">_onValueChange<span class="token punctuation">(</span></span>selectedValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onValueChange <span class="token operator">=</span> async <span class="token punctuation">(</span>selectedValue<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>selectedValue<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
await AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem<span class="token punctuation">(</span></span>STORAGE_KEY<span class="token punctuation">,</span> selectedValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -196,21 +194,21 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><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">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<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>
|
||||
|
||||
async <span class="token function">_removeStorage<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_removeStorage <span class="token operator">=</span> async <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
await AsyncStorage<span class="token punctuation">.</span><span class="token function">removeItem<span class="token punctuation">(</span></span>STORAGE_KEY<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">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'Selection removed from disk.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><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">_appendMessage<span class="token punctuation">(</span></span><span class="token string">'AsyncStorage error: '</span> <span class="token operator">+</span> error<span class="token punctuation">.</span>message<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">_appendMessage<span class="token punctuation">(</span></span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_appendMessage <span class="token operator">=</span> <span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>messages<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span>message<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 punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'AsyncStorage'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Asynchronous local disk storage.'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -23,15 +23,12 @@ const AssetScaledImageExampleView <span class="token operator">=</span> <span cl
|
||||
|
||||
const CAMERA_ROLL_VIEW <span class="token operator">=</span> <span class="token string">'camera_roll_view'</span><span class="token punctuation">;</span>
|
||||
|
||||
const CameraRollExample <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>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
groupTypes<span class="token punctuation">:</span> <span class="token string">'SavedPhotos'</span><span class="token punctuation">,</span>
|
||||
sliderValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
bigImages<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
class <span class="token class-name">CameraRollExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
groupTypes<span class="token punctuation">:</span> <span class="token string">'SavedPhotos'</span><span class="token punctuation">,</span>
|
||||
sliderValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
bigImages<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
@@ -53,9 +50,9 @@ const CameraRollExample <span class="token operator">=</span> React<span class="
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">loadAsset<span class="token punctuation">(</span></span>asset<span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
loadAsset <span class="token operator">=</span> <span class="token punctuation">(</span>asset<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Camera Roll Image'</span><span class="token punctuation">,</span>
|
||||
@@ -64,9 +61,9 @@ const CameraRollExample <span class="token operator">=</span> React<span class="
|
||||
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> asset<span class="token punctuation">:</span> asset <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 punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_renderImage<span class="token punctuation">(</span></span>asset<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_renderImage <span class="token operator">=</span> <span class="token punctuation">(</span>asset<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
const imageSize <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bigImages <span class="token operator">?</span> <span class="token number">150</span> <span class="token punctuation">:</span> <span class="token number">75</span><span class="token punctuation">;</span>
|
||||
const imageStyle <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 punctuation">{</span>width<span class="token punctuation">:</span> imageSize<span class="token punctuation">,</span> height<span class="token punctuation">:</span> imageSize<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
const location <span class="token operator">=</span> asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>location<span class="token punctuation">.</span>longitude <span class="token operator">?</span>
|
||||
@@ -87,22 +84,22 @@ const CameraRollExample <span class="token operator">=</span> React<span class="
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>TouchableOpacity<span class="token operator">></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">_onSliderChange<span class="token punctuation">(</span></span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onSliderChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
const options <span class="token operator">=</span> CameraRoll<span class="token punctuation">.</span>GroupTypesOptions<span class="token punctuation">;</span>
|
||||
const index <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor<span class="token punctuation">(</span></span>value <span class="token operator">*</span> options<span class="token punctuation">.</span>length <span class="token operator">*</span> <span class="token number">0.99</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const groupTypes <span class="token operator">=</span> options<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>groupTypes <span class="token operator">!</span><span class="token operator">==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>groupTypes<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>groupTypes<span class="token punctuation">:</span> groupTypes<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">_onSwitchChange<span class="token punctuation">(</span></span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onSwitchChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>CAMERA_ROLL_VIEW<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">rendererChanged<span class="token punctuation">(</span></span><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> bigImages<span class="token punctuation">:</span> value <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 punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const 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>
|
||||
|
||||
@@ -12,14 +12,12 @@
|
||||
Text<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ClipboardExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
content<span class="token punctuation">:</span> <span class="token string">'Content will appear here'</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">ClipboardExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
content<span class="token punctuation">:</span> <span class="token string">'Content will appear here'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
async <span class="token function">_setClipboardContent<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
_setClipboardContent <span class="token operator">=</span> async <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
Clipboard<span class="token punctuation">.</span><span class="token function">setString<span class="token punctuation">(</span></span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> content <span class="token operator">=</span> await Clipboard<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -27,7 +25,7 @@
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><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>content<span class="token punctuation">:</span>e<span class="token punctuation">.</span>message<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 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>
|
||||
@@ -41,7 +39,7 @@
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Clipboard'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Show Clipboard contents.'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -30,26 +30,21 @@ when using the <code>minDate</code> and <code>maxDate</code> options.</p></div><
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> DatePickerAndroidExample <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>
|
||||
class <span class="token class-name">DatePickerAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'DatePickerAndroid'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Standard Android date picker dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'DatePickerAndroid'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Standard Android date picker dialog'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
presetDate<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
allDate<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
simpleText<span class="token punctuation">:</span> <span class="token string">'pick a date'</span><span class="token punctuation">,</span>
|
||||
minText<span class="token punctuation">:</span> <span class="token string">'pick a date, no earlier than today'</span><span class="token punctuation">,</span>
|
||||
maxText<span class="token punctuation">:</span> <span class="token string">'pick a date, no later than today'</span><span class="token punctuation">,</span>
|
||||
presetText<span class="token punctuation">:</span> <span class="token string">'pick a date, preset to 2020/5/5'</span><span class="token punctuation">,</span>
|
||||
allText<span class="token punctuation">:</span> <span class="token string">'pick a date between 2020/5/1 and 2020/5/10'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
presetDate<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
allDate<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
simpleText<span class="token punctuation">:</span> <span class="token string">'pick a date'</span><span class="token punctuation">,</span>
|
||||
minText<span class="token punctuation">:</span> <span class="token string">'pick a date, no earlier than today'</span><span class="token punctuation">,</span>
|
||||
maxText<span class="token punctuation">:</span> <span class="token string">'pick a date, no later than today'</span><span class="token punctuation">,</span>
|
||||
presetText<span class="token punctuation">:</span> <span class="token string">'pick a date, preset to 2020/5/5'</span><span class="token punctuation">,</span>
|
||||
allText<span class="token punctuation">:</span> <span class="token string">'pick a date between 2020/5/1 and 2020/5/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>
|
||||
|
||||
async <span class="token function">showPicker<span class="token punctuation">(</span></span>stateKey<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showPicker <span class="token operator">=</span> async <span class="token punctuation">(</span>stateKey<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> newState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
const <span class="token punctuation">{</span>action<span class="token punctuation">,</span> year<span class="token punctuation">,</span> month<span class="token punctuation">,</span> day<span class="token punctuation">}</span> <span class="token operator">=</span> await DatePickerAndroid<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -64,7 +59,7 @@ when using the <code>minDate</code> and <code>maxDate</code> options.</p></div><
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>code<span class="token punctuation">,</span> message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span>`Error <span class="token keyword">in</span> example <span class="token string">'${stateKey}'</span><span class="token punctuation">:</span> `<span class="token punctuation">,</span> message<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 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>
|
||||
@@ -111,8 +106,8 @@ when using the <code>minDate</code> and <code>maxDate</code> options.</p></div><
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
<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>
|
||||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -18,34 +18,30 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div><
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> DatePickerExample <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>
|
||||
getDefaultProps<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>
|
||||
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
timeZoneOffsetInHours<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</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">getTimezoneOffset<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">60</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>
|
||||
class <span class="token class-name">DatePickerExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
timeZoneOffsetInHours<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</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">getTimezoneOffset<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
date<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>date<span class="token punctuation">,</span>
|
||||
timeZoneOffsetInHours<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>timeZoneOffsetInHours<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>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
date<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>date<span class="token punctuation">,</span>
|
||||
timeZoneOffsetInHours<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>timeZoneOffsetInHours<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
onDateChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onDateChange <span class="token operator">=</span> <span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>date<span class="token punctuation">:</span> date<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>
|
||||
|
||||
onTimezoneChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onTimezoneChange <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> offset <span class="token operator">=</span> <span class="token function">parseInt<span class="token punctuation">(</span></span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>text<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isNaN<span class="token punctuation">(</span></span>offset<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>
|
||||
<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>timeZoneOffsetInHours<span class="token punctuation">:</span> offset<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>
|
||||
|
||||
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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Ideally, the timezone input would be a picker rather than a
|
||||
</span> <span class="token comment" spellcheck="true"> // text input, but we don't have any pickers yet :(
|
||||
</span> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -89,11 +85,11 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div><
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> WithLabel <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>
|
||||
class <span class="token class-name">WithLabel</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>labelContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>labelView<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -105,10 +101,10 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div><
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> Heading <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>
|
||||
class <span class="token class-name">Heading</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>headingContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>heading<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -117,7 +113,7 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.</p></div></div><
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token punctuation">(</span>undefined<span class="token punctuation">:</span> <span class="token operator">?</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<DatePickerIOS>'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -31,17 +31,15 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> GeolocationExample <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>
|
||||
watchID<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">:</span> <span class="token operator">?</span>number<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
class <span class="token class-name">GeolocationExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
initialPosition<span class="token punctuation">:</span> <span class="token string">'unknown'</span><span class="token punctuation">,</span>
|
||||
lastPosition<span class="token punctuation">:</span> <span class="token string">'unknown'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
initialPosition<span class="token punctuation">:</span> <span class="token string">'unknown'</span><span class="token punctuation">,</span>
|
||||
lastPosition<span class="token punctuation">:</span> <span class="token string">'unknown'</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>
|
||||
watchID<span class="token punctuation">:</span> <span class="token operator">?</span>number <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||||
|
||||
componentDidMount<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 function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">getCurrentPosition<span class="token punctuation">(</span></span>
|
||||
<span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> initialPosition <span class="token operator">=</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>position<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -54,13 +52,13 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">var</span> lastPosition <span class="token operator">=</span> JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>position<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>lastPosition<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 punctuation">}</span>
|
||||
|
||||
componentWillUnmount<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 function">componentWillUnmount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
navigator<span class="token punctuation">.</span>geolocation<span class="token punctuation">.</span><span class="token function">clearWatch<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>watchID<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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>
|
||||
@@ -74,7 +72,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -15,25 +15,22 @@ const <span class="token punctuation">{</span>
|
||||
TouchableOpacity<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
const AddRemoveExample <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>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
views<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>
|
||||
class <span class="token class-name">AddRemoveExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
views<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">componentWillUpdate<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span><span class="token function">easeInEaseOut<span class="token punctuation">(</span></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">_onPressAddView<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onPressAddView <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>views<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>state<span class="token punctuation">.</span>views<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 punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onPressRemoveView<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onPressRemoveView <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>views<span class="token punctuation">:</span> state<span class="token punctuation">.</span>views<span class="token punctuation">.</span><span class="token function">slice<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</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><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>
|
||||
const views <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>views<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>view<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
@@ -58,8 +55,8 @@ const AddRemoveExample <span class="token operator">=</span> React<span class="t
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const GreenSquare <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>greenSquare<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -71,18 +68,15 @@ const BlueSquare <span class="token operator">=</span> <span class="token punctu
|
||||
<Text<span class="token operator">></span>Blue square<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span><span class="token punctuation">;</span>
|
||||
|
||||
const CrossFadeExample <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>
|
||||
class <span class="token class-name">CrossFadeExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
toggled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
toggled<span class="token punctuation">:</span> <span class="token boolean">false</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">_onPressToggle<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onPressToggle <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
LayoutAnimation<span class="token punctuation">.</span><span class="token function">easeInEaseOut<span class="token punctuation">(</span></span><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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>toggled<span class="token punctuation">:</span> <span class="token operator">!</span>state<span class="token punctuation">.</span>toggled<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 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>
|
||||
@@ -101,8 +95,8 @@ const CrossFadeExample <span class="token operator">=</span> React<span class="t
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const 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>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -64,13 +64,12 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> OpenURLButton <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>
|
||||
|
||||
propTypes<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">OpenURLButton</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> React<span class="token punctuation">.</span>PropTypes<span class="token punctuation">.</span>string<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>
|
||||
|
||||
handleClick<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>
|
||||
handleClick <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
Linking<span class="token punctuation">.</span><span class="token function">canOpenURL<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span>supported <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>supported<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
Linking<span class="token punctuation">.</span><span class="token function">openURL<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -78,9 +77,9 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Don\'t know how to open URI: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>url<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 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 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>
|
||||
<TouchableOpacity
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -90,16 +89,13 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
|
||||
<<span class="token operator">/</span>TouchableOpacity<span class="token operator">></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> IntentAndroidExample <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>
|
||||
class <span class="token class-name">IntentAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'Linking'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Shows how to use Linking to open URLs.'</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Linking'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Shows how to use Linking to open URLs.'</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 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>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Open external URLs"</span><span class="token operator">></span>
|
||||
<OpenURLButton url<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'https://www.facebook.com'</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
@@ -110,8 +106,8 @@ it will give the link url, otherwise it will give <code>null</code></p><p>NOTE:
|
||||
<OpenURLButton url<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'tel:9876543210'</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></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>
|
||||
<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>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -182,16 +182,13 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> MapViewExample <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>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
mapRegion<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
|
||||
mapRegionInput<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
|
||||
annotations<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>
|
||||
class <span class="token class-name">MapViewExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
mapRegion<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
|
||||
mapRegionInput<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
|
||||
annotations<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 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>
|
||||
@@ -209,23 +206,23 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">_getAnnotations<span class="token punctuation">(</span></span>region<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_getAnnotations <span class="token operator">=</span> <span class="token punctuation">(</span>region<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
longitude<span class="token punctuation">:</span> region<span class="token punctuation">.</span>longitude<span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> region<span class="token punctuation">.</span>latitude<span class="token punctuation">,</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'You Are Here'</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>
|
||||
|
||||
<span class="token function">_onRegionChange<span class="token punctuation">(</span></span>region<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onRegionChange <span class="token operator">=</span> <span class="token punctuation">(</span>region<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
mapRegionInput<span class="token punctuation">:</span> region<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">_onRegionChangeComplete<span class="token punctuation">(</span></span>region<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onRegionChangeComplete <span class="token operator">=</span> <span class="token punctuation">(</span>region<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isFirstLoad<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>
|
||||
mapRegionInput<span class="token punctuation">:</span> region<span class="token punctuation">,</span>
|
||||
@@ -233,27 +230,23 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">false</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><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onRegionInputChanged<span class="token punctuation">(</span></span>region<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onRegionInputChanged <span class="token operator">=</span> <span class="token punctuation">(</span>region<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
mapRegion<span class="token punctuation">:</span> region<span class="token punctuation">,</span>
|
||||
mapRegionInput<span class="token punctuation">:</span> region<span class="token punctuation">,</span>
|
||||
annotations<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_getAnnotations<span class="token punctuation">(</span></span>region<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 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> AnnotationExample <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>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
annotations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
mapRegion<span class="token punctuation">:</span> undefined<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>
|
||||
class <span class="token class-name">AnnotationExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
annotations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
mapRegion<span class="token punctuation">:</span> undefined<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">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isFirstLoad<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -277,13 +270,17 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
annotations<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>annotations<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></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><span class="token punctuation">;</span>
|
||||
class <span class="token class-name">DraggableAnnotationExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
annotations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
mapRegion<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">var</span> DraggableAnnotationExample <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>
|
||||
|
||||
<span class="token function">createAnnotation<span class="token punctuation">(</span></span>longitude<span class="token punctuation">,</span> latitude<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
createAnnotation <span class="token operator">=</span> <span class="token punctuation">(</span>longitude<span class="token punctuation">,</span> latitude<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
longitude<span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">,</span>
|
||||
@@ -297,15 +294,7 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Drag state: '</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>state<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">getInitialState<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>
|
||||
isFirstLoad<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
annotations<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
mapRegion<span class="token punctuation">:</span> undefined<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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isFirstLoad<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -327,9 +316,8 @@ Default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="
|
||||
annotations<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>annotations<span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></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>
|
||||
<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>
|
||||
map<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -63,20 +63,18 @@ exports<span class="token punctuation">.</span>framework <span class="token oper
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<Modal>'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Component for presenting modal views.'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Button <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
active<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
class <span class="token class-name">Button</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
active<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onHighlight<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onHighlight <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>active<span class="token punctuation">:</span> <span class="token boolean">true</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">_onUnhighlight<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onUnhighlight <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>active<span class="token punctuation">:</span> <span class="token boolean">false</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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> colorStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
@@ -93,28 +91,26 @@ exports<span class="token punctuation">.</span>description <span class="token op
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></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> ModalExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
animationType<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
|
||||
modalVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
transparent<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
class <span class="token class-name">ModalExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
animationType<span class="token punctuation">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
|
||||
modalVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
transparent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_setModalVisible<span class="token punctuation">(</span></span>visible<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_setModalVisible <span class="token operator">=</span> <span class="token punctuation">(</span>visible<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>modalVisible<span class="token punctuation">:</span> visible<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">_setAnimationType<span class="token punctuation">(</span></span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_setAnimationType <span class="token operator">=</span> <span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>animationType<span class="token punctuation">:</span> type<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">_toggleTransparent<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_toggleTransparent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>transparent<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>transparent<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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> modalBackgroundStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
@@ -169,8 +165,8 @@ exports<span class="token punctuation">.</span>description <span class="token op
|
||||
<<span class="token operator">/</span>Button<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
|
||||
@@ -166,8 +166,8 @@ const <span class="token punctuation">{</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
const EmptyPage <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>
|
||||
class <span class="token class-name">EmptyPage</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>emptyPage<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>emptyPageText<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -175,11 +175,11 @@ const EmptyPage <span class="token operator">=</span> React<span class="token pu
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const NavigatorIOSExamplePage <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>
|
||||
class <span class="token class-name">NavigatorIOSExamplePage</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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">var</span> recurseTitle <span class="token operator">=</span> <span class="token string">'Recurse Navigation'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
recurseTitle <span class="token operator">+</span><span class="token operator">=</span> <span class="token string">' - more examples here'</span><span class="token punctuation">;</span>
|
||||
@@ -258,9 +258,9 @@ const NavigatorIOSExamplePage <span class="token operator">=</span> React<span c
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>line<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>ScrollView<span class="token operator">></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>
|
||||
|
||||
_renderReplace<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>
|
||||
_renderReplace <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // this is to avoid replacing the top of the stack
|
||||
</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||||
@@ -278,9 +278,9 @@ const NavigatorIOSExamplePage <span class="token operator">=</span> React<span c
|
||||
<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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_renderReplacePrevious<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>
|
||||
_renderReplacePrevious <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth < <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // this is to avoid replacing the top of the stack
|
||||
</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||||
@@ -295,9 +295,9 @@ const NavigatorIOSExamplePage <span class="token operator">=</span> React<span c
|
||||
wrapperStyle<span class="token punctuation">:</span> styles<span class="token punctuation">.</span>customWrapperStyle<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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_renderReplacePreviousAndPop<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>
|
||||
_renderReplacePreviousAndPop <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>depth < <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // this is to avoid replacing the top of the stack
|
||||
</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
||||
@@ -312,9 +312,9 @@ const NavigatorIOSExamplePage <span class="token operator">=</span> React<span c
|
||||
wrapperStyle<span class="token punctuation">:</span> styles<span class="token punctuation">.</span>customWrapperStyle<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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_renderRow<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> string<span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> Function<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_renderRow <span class="token operator">=</span> <span class="token punctuation">(</span>title<span class="token punctuation">:</span> string<span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> Function<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
<TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span>onPress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -327,17 +327,15 @@ const NavigatorIOSExamplePage <span class="token operator">=</span> React<span c
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>separator<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const NavigatorIOSExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<NavigatorIOS>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'iOS navigation capabilities'</span><span class="token punctuation">,</span>
|
||||
external<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
class <span class="token class-name">NavigatorIOSExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<NavigatorIOS>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'iOS navigation capabilities'</span><span class="token punctuation">;</span>
|
||||
static external <span class="token operator">=</span> <span class="token boolean">true</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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
const <span class="token punctuation">{</span>onExampleExit<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<NavigatorIOS
|
||||
@@ -350,8 +348,8 @@ const NavigatorIOSExample <span class="token operator">=</span> React<span class
|
||||
tintColor<span class="token operator">=</span><span class="token string">"#008888"</span>
|
||||
<span class="token operator">/</span><span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const 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>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -51,31 +51,33 @@ const <span class="token punctuation">{</span>
|
||||
TouchableWithoutFeedback<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
const ConnectionInfoSubscription <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
connectionInfoHistory<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>
|
||||
componentDidMount<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>
|
||||
class <span class="token class-name">ConnectionInfoSubscription</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
connectionInfoHistory<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">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
componentWillUnmount<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 punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleConnectionInfoChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
_handleConnectionInfoChange <span class="token operator">=</span> <span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
const connectionInfoHistory <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>connectionInfoHistory<span class="token punctuation">.</span><span class="token function">slice<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
connectionInfoHistory<span class="token punctuation">.</span><span class="token function">push<span class="token punctuation">(</span></span>connectionInfo<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>
|
||||
connectionInfoHistory<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 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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -83,15 +85,14 @@ const ConnectionInfoSubscription <span class="token operator">=</span> React<spa
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
const ConnectionInfoCurrent <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
connectionInfo<span class="token punctuation">:</span> <span class="token keyword">null</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>
|
||||
componentDidMount<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>
|
||||
class <span class="token class-name">ConnectionInfoCurrent</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
connectionInfo<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
|
||||
@@ -99,18 +100,21 @@ const ConnectionInfoCurrent <span class="token operator">=</span> React<span cla
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span>
|
||||
<span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>connectionInfo<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>
|
||||
componentWillUnmount<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 punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectionInfoChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleConnectionInfoChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
_handleConnectionInfoChange <span class="token operator">=</span> <span class="token punctuation">(</span>connectionInfo<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
connectionInfo<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 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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -118,15 +122,14 @@ const ConnectionInfoCurrent <span class="token operator">=</span> React<span cla
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
const IsConnected <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
isConnected<span class="token punctuation">:</span> <span class="token keyword">null</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>
|
||||
componentDidMount<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>
|
||||
class <span class="token class-name">IsConnected</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isConnected<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">addEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectivityChange
|
||||
@@ -134,18 +137,21 @@ const IsConnected <span class="token operator">=</span> React<span class="token
|
||||
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">fetch<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done<span class="token punctuation">(</span></span>
|
||||
<span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>isConnected<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>
|
||||
componentWillUnmount<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 punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">removeEventListener<span class="token punctuation">(</span></span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handleConnectivityChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
_handleConnectivityChange <span class="token operator">=</span> <span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
isConnected<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 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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -153,19 +159,19 @@ const IsConnected <span class="token operator">=</span> React<span class="token
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
const IsConnectionExpensive <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
isConnectionExpensive<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token operator">?</span>boolean<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">_checkIfExpensive<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">IsConnectionExpensive</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isConnectionExpensive<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token operator">?</span>boolean<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_checkIfExpensive <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then<span class="token punctuation">(</span></span>
|
||||
isConnectionExpensive <span class="token operator">=</span><span class="token operator">></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>isConnectionExpensive<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 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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -181,7 +187,7 @@ const IsConnectionExpensive <span class="token operator">=</span> React<span cla
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'NetInfo'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Monitor network status'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -18,27 +18,23 @@ const <span class="token punctuation">{</span>
|
||||
Picker<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
TouchableWithoutFeedback<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
const Item <span class="token operator">=</span> Picker<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||||
// $FlowFixMe found when converting React.createClass to ES6
|
||||
</span>const Item <span class="token operator">=</span> Picker<span class="token punctuation">.</span>Item<span class="token punctuation">;</span>
|
||||
|
||||
const PickerExample <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>
|
||||
class <span class="token class-name">PickerExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<Picker>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Provides multiple options to choose from, using either a dropdown menu or a dialog.'</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<Picker>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Provides multiple options to choose from, using either a dropdown menu or a dialog.'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
selected1<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected2<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected3<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token punctuation">:</span> Picker<span class="token punctuation">.</span>MODE_DIALOG<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
selected1<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected2<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
selected3<span class="token punctuation">:</span> <span class="token string">'key1'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token punctuation">:</span> Picker<span class="token punctuation">.</span>MODE_DIALOG<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 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>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"<Picker>"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Basic Picker"</span><span class="token operator">></span>
|
||||
@@ -107,21 +103,21 @@ const PickerExample <span class="token operator">=</span> React<span class="toke
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
|
||||
changeMode<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>
|
||||
changeMode <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
const newMode <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>mode <span class="token operator">===</span> Picker<span class="token punctuation">.</span>MODE_DIALOG
|
||||
<span class="token operator">?</span> Picker<span class="token punctuation">.</span>MODE_DROPDOWN
|
||||
<span class="token punctuation">:</span> Picker<span class="token punctuation">.</span>MODE_DIALOG<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>mode<span class="token punctuation">:</span> newMode<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>
|
||||
|
||||
onValueChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> value<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onValueChange <span class="token operator">=</span> <span class="token punctuation">(</span>key<span class="token punctuation">:</span> string<span class="token punctuation">,</span> value<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
const newState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
newState<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<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>newState<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 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>
|
||||
picker<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -51,15 +51,13 @@
|
||||
<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> PickerExample <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
|
||||
modelIndex<span class="token punctuation">:</span> <span class="token number">3</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>
|
||||
class <span class="token class-name">PickerExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
|
||||
modelIndex<span class="token punctuation">:</span> <span class="token number">3</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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> make <span class="token operator">=</span> CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> selectionString <span class="token operator">=</span> make<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> make<span class="token punctuation">.</span>models<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -92,18 +90,16 @@
|
||||
<Text<span class="token operator">></span>You selected<span class="token punctuation">:</span> <span class="token punctuation">{</span>selectionString<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> PickerStyleExample <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
|
||||
modelIndex<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">PickerStyleExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
carMake<span class="token punctuation">:</span> <span class="token string">'cadillac'</span><span class="token punctuation">,</span>
|
||||
modelIndex<span class="token punctuation">:</span> <span class="token number">0</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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> make <span class="token operator">=</span> CAR_MAKES_AND_MODELS<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>carMake<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> selectionString <span class="token operator">=</span> make<span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> make<span class="token punctuation">.</span>models<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modelIndex<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -120,8 +116,8 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>PickerIOS<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token punctuation">(</span>undefined<span class="token punctuation">:</span> <span class="token operator">?</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<PickerIOS>'</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -45,14 +45,11 @@ can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><
|
||||
<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> ProgressBarAndroidExample <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>
|
||||
class <span class="token class-name">ProgressBarAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<ProgressBarAndroid>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Horizontal bar to show the progress of some operation.'</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<ProgressBarAndroid>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Horizontal bar to show the progress of some operation.'</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 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>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"ProgressBar Examples"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Horizontal Indeterminate ProgressBar"</span><span class="token operator">></span>
|
||||
@@ -72,8 +69,8 @@ can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ProgressBarAndroidExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="338" src="img/uiexplorer_main_android.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/q7wkvt42v6bkr0pzt1n0gmbwfr?device=nexus5&scale=65&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22ProgressBarAndroid%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/pickerios.html#content">← Prev</a><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -58,8 +58,8 @@ Listening to the <code>notification</code> event and invoking
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Button <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>
|
||||
class <span class="token class-name">Button</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<TouchableHighlight
|
||||
underlayColor<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'white'</span><span class="token punctuation">}</span>
|
||||
@@ -71,7 +71,7 @@ Listening to the <code>notification</code> event and invoking
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></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>
|
||||
|
||||
class <span class="token class-name">NotificationExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">componentWillMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -62,11 +62,12 @@ const styles <span class="token operator">=</span> StyleSheet<span class="token
|
||||
<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>
|
||||
|
||||
const Row <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>
|
||||
_onClick<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>
|
||||
class <span class="token class-name">Row</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_onClick <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onClick<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<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 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>
|
||||
<TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onClick<span class="token punctuation">}</span> <span class="token operator">></span>
|
||||
<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">></span>
|
||||
@@ -76,30 +77,26 @@ const Row <span class="token operator">=</span> React<span class="token punctuat
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const RefreshControlExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<RefreshControl>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Adds pull-to-refresh support to a scrollview.'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
class <span class="token class-name">RefreshControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<RefreshControl>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Adds pull-to-refresh support to a scrollview.'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
isRefreshing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
rowData<span class="token punctuation">:</span> Array<span class="token punctuation">.</span><span class="token function">from<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>
|
||||
<span class="token punctuation">(</span>val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><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">'Initial row '</span> <span class="token operator">+</span> i<span class="token punctuation">,</span> clicks<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isRefreshing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
loaded<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
rowData<span class="token punctuation">:</span> Array<span class="token punctuation">.</span><span class="token function">from<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>
|
||||
<span class="token punctuation">(</span>val<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><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">'Initial row '</span> <span class="token operator">+</span> i<span class="token punctuation">,</span> clicks<span class="token punctuation">:</span> <span class="token number">0</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">_onClick<span class="token punctuation">(</span></span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onClick <span class="token operator">=</span> <span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
row<span class="token punctuation">.</span>clicks<span class="token operator">++</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>
|
||||
rowData<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rowData<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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
const rows <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rowData<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>row<span class="token punctuation">,</span> ii<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
@@ -122,9 +119,9 @@ const RefreshControlExample <span class="token operator">=</span> React<span cla
|
||||
<span class="token punctuation">{</span>rows<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>ScrollView<span class="token operator">></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">_onRefresh<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onRefresh <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>isRefreshing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">setTimeout<span class="token punctuation">(</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // prepend 10 items
|
||||
@@ -141,8 +138,8 @@ const RefreshControlExample <span class="token operator">=</span> React<span cla
|
||||
rowData<span class="token punctuation">:</span> rowData<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 number">5000</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><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> RefreshControlExample<span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22RefreshControl%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/progressviewios.html#content">← Prev</a><a class="docs-next" href="docs/scrollview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -158,18 +158,19 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<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> Thumb <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>
|
||||
shouldComponentUpdate<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">Thumb</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">shouldComponentUpdate<span class="token punctuation">(</span></span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token boolean">false</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 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>
|
||||
<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">></span>
|
||||
<Image style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>img<span class="token punctuation">}</span> 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 keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>uri<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> THUMBS <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
THUMBS <span class="token operator">=</span> THUMBS<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span>THUMBS<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // double length of THUMBS
|
||||
|
||||
@@ -22,7 +22,7 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
StyleSheet
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> BasicSegmentedControlExample <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>
|
||||
class <span class="token class-name">BasicSegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -35,9 +35,9 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> PreSelectedSegmentedControlExample <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>
|
||||
class <span class="token class-name">PreSelectedSegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -47,9 +47,9 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> MomentarySegmentedControlExample <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>
|
||||
class <span class="token class-name">MomentarySegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -59,9 +59,9 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> DisabledSegmentedControlExample <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>
|
||||
class <span class="token class-name">DisabledSegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -70,10 +70,10 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> ColorSegmentedControlExample <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>
|
||||
class <span class="token class-name">ColorSegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -85,17 +85,15 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> EventSegmentedControlExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'One'</span><span class="token punctuation">,</span> <span class="token string">'Two'</span><span class="token punctuation">,</span> <span class="token string">'Three'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
value<span class="token punctuation">:</span> <span class="token string">'Not selected'</span><span class="token punctuation">,</span>
|
||||
selectedIndex<span class="token punctuation">:</span> undefined
|
||||
<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">EventSegmentedControlExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'One'</span><span class="token punctuation">,</span> <span class="token string">'Two'</span><span class="token punctuation">,</span> <span class="token string">'Three'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
value<span class="token punctuation">:</span> <span class="token string">'Not selected'</span><span class="token punctuation">,</span>
|
||||
selectedIndex<span class="token punctuation">:</span> undefined
|
||||
<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>
|
||||
@@ -113,20 +111,20 @@ passes the segment's value as an argument</p></div></div><div class="prop">
|
||||
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onValueChange<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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">_onChange<span class="token punctuation">(</span></span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChange <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedSegmentIndex<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">_onValueChange<span class="token punctuation">(</span></span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onValueChange <span class="token operator">=</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
value<span class="token punctuation">:</span> value<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 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>
|
||||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -22,18 +22,14 @@ The center pixel of the image will be stretched to fill the track.</p></div></di
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> SliderExample <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>
|
||||
<span class="token function">getDefaultProps<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>
|
||||
value<span class="token punctuation">:</span> <span class="token number">0</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">SliderExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
value<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">getInitialState<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>
|
||||
value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<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>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value<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>
|
||||
@@ -47,15 +43,13 @@ The center pixel of the image will be stretched to fill the track.</p></div></di
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> SlidingCompleteExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
slideCompletionValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
slideCompletionCount<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">SlidingCompleteExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
slideCompletionValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
slideCompletionCount<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
@@ -71,7 +65,7 @@ The center pixel of the image will be stretched to fill the track.</p></div></di
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
slider<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -23,12 +23,10 @@ the value, the component won't be reset to its initial value.</p></div></di
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> SliderExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
value<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">SliderExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
value<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
@@ -42,7 +40,7 @@ the value, the component won't be reset to its initial value.</p></div></di
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
slider<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -59,31 +59,29 @@ const showHideTransitions <span class="token operator">=</span> <span class="tok
|
||||
<span class="token keyword">return</span> values<span class="token punctuation">[</span>index <span class="token operator">%</span> values<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarHiddenExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
hidden<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
showHideTransition<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>showHideTransitions<span class="token punctuation">,</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">StatusBarHiddenExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
hidden<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
showHideTransition<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>showHideTransitions<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_showHideTransitionIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
_showHideTransitionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onChangeAnimated<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeAnimated <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>animated<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated<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">_onChangeHidden<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeHidden <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>hidden<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>hidden<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">_onChangeTransition<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeTransition <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_showHideTransitionIndex<span class="token operator">++</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>
|
||||
showHideTransition<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>showHideTransitions<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_showHideTransitionIndex<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 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>
|
||||
@@ -119,27 +117,25 @@ const StatusBarHiddenExample <span class="token operator">=</span> React<span cl
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarStyleExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
barStyle<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>barStyles<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_barStyleIndex<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>
|
||||
class <span class="token class-name">StatusBarStyleExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_barStyleIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
|
||||
_barStyleIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
|
||||
<span class="token function">_onChangeBarStyle<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeBarStyle <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_barStyleIndex<span class="token operator">++</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>barStyle<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>barStyles<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_barStyleIndex<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">_onChangeAnimated<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeAnimated <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>animated<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated<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>
|
||||
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
barStyle<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>barStyles<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_barStyleIndex<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>
|
||||
@@ -164,21 +160,19 @@ const StatusBarStyleExample <span class="token operator">=</span> React<span cla
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarNetworkActivityExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
networkActivityIndicatorVisible<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
class <span class="token class-name">StatusBarNetworkActivityExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
networkActivityIndicatorVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onChangeNetworkIndicatorVisible<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeNetworkIndicatorVisible <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
networkActivityIndicatorVisible<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>networkActivityIndicatorVisible<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 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>
|
||||
@@ -198,27 +192,25 @@ const StatusBarNetworkActivityExample <span class="token operator">=</span> Reac
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarBackgroundColorExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>colors<span class="token punctuation">,</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">StatusBarBackgroundColorExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
animated<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>colors<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
_colorIndex<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
_colorIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_onChangeBackgroundColor<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeBackgroundColor <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_colorIndex<span class="token operator">++</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>backgroundColor<span class="token punctuation">:</span> <span class="token function">getValue<span class="token punctuation">(</span></span>colors<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_colorIndex<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">_onChangeAnimated<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeAnimated <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>animated<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animated<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 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>
|
||||
@@ -243,22 +235,19 @@ const StatusBarBackgroundColorExample <span class="token operator">=</span> Reac
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
class <span class="token class-name">StatusBarTranslucentExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
translucent<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
const StatusBarTranslucentExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
translucent<span class="token punctuation">:</span> <span class="token boolean">false</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">_onChangeTranslucent<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_onChangeTranslucent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
translucent<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>translucent<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 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>
|
||||
@@ -275,10 +264,10 @@ const StatusBarTranslucentExample <span class="token operator">=</span> React<sp
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarStaticIOSExample <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>
|
||||
class <span class="token class-name">StatusBarStaticIOSExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -338,10 +327,10 @@ const StatusBarStaticIOSExample <span class="token operator">=</span> React<span
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const StatusBarStaticAndroidExample <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>
|
||||
class <span class="token class-name">StatusBarStaticAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -403,8 +392,8 @@ const StatusBarStaticAndroidExample <span class="token operator">=</span> React<
|
||||
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
const examples <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">'StatusBar hidden'</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -15,13 +15,12 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
View
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> BasicSwitchExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
trueSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
falseSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
class <span class="token class-name">BasicSwitchExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
trueSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
falseSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -35,9 +34,9 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> DisabledSwitchExample <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>
|
||||
class <span class="token class-name">DisabledSwitchExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -50,16 +49,15 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
class <span class="token class-name">ColorSwitchExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
colorTrueSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
colorFalseSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ColorSwitchExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
colorTrueSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
colorFalseSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</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 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>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -78,16 +76,15 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
value<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>colorTrueSwitchIsOn<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
class <span class="token class-name">EventSwitchExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
eventSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
eventSwitchRegressionIsOn<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> EventSwitchExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
eventSwitchIsOn<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
eventSwitchRegressionIsOn<span class="token punctuation">:</span> <span class="token boolean">true</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 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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">'space-around'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -116,7 +113,7 @@ Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> examples <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
|
||||
@@ -17,32 +17,27 @@ it defaults to center.</p></div></div><div class="prop"><h4 class="propTitle"><a
|
||||
|
||||
<span class="token keyword">var</span> base64Icon <span class="token operator">=</span> <span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg=='</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> TabBarExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<TabBarIOS>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Tab-based navigation.'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
class <span class="token class-name">TabBarExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<TabBarIOS>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Tab-based navigation.'</span><span class="token punctuation">;</span>
|
||||
static displayName <span class="token operator">=</span> <span class="token string">'TabBarExample'</span><span class="token punctuation">;</span>
|
||||
|
||||
displayName<span class="token punctuation">:</span> <span class="token string">'TabBarExample'</span><span class="token punctuation">,</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
selectedTab<span class="token punctuation">:</span> <span class="token string">'redTab'</span><span class="token punctuation">,</span>
|
||||
notifCount<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
presses<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
selectedTab<span class="token punctuation">:</span> <span class="token string">'redTab'</span><span class="token punctuation">,</span>
|
||||
notifCount<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
presses<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
|
||||
_renderContent<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">,</span> pageText<span class="token punctuation">:</span> string<span class="token punctuation">,</span> num<span class="token operator">?</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
_renderContent <span class="token operator">=</span> <span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">,</span> pageText<span class="token punctuation">:</span> string<span class="token punctuation">,</span> num<span class="token operator">?</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>tabContent<span class="token punctuation">,</span> <span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> color<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>tabText<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>pageText<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>tabText<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span>num<span class="token punctuation">}</span> re<span class="token operator">-</span>renders of the <span class="token punctuation">{</span>pageText<span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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 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>
|
||||
<TabBarIOS
|
||||
unselectedTintColor<span class="token operator">=</span><span class="token string">"yellow"</span>
|
||||
@@ -87,9 +82,8 @@ it defaults to center.</p></div></div><div class="prop"><h4 class="propTitle"><a
|
||||
<<span class="token operator">/</span>TabBarIOS<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>TabBarIOS<span class="token operator">></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>
|
||||
<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>
|
||||
tabContent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -148,31 +148,32 @@ html <span class="token punctuation">{</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Entity <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>
|
||||
class <span class="token class-name">Entity</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<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">'500'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</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>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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> AttributeToggler <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>
|
||||
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">return</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
toggleWeight<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>
|
||||
class <span class="token class-name">AttributeToggler</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
toggleWeight <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight <span class="token operator">===</span> <span class="token string">'bold'</span> <span class="token operator">?</span> <span class="token string">'normal'</span> <span class="token punctuation">:</span> <span class="token string">'bold'</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>
|
||||
increaseSize<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 punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
increaseSize <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize <span class="token operator">+</span> <span class="token number">1</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 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">var</span> curStyle <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight<span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -195,7 +196,7 @@ html <span class="token punctuation">{</span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<Text>'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Base component for rendering styled text.'</span><span class="token punctuation">;</span>
|
||||
@@ -602,31 +603,32 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Entity <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>
|
||||
class <span class="token class-name">Entity</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<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">'bold'</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token string">'#527fe4'</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>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></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> AttributeToggler <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>
|
||||
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">return</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
toggleWeight<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>
|
||||
class <span class="token class-name">AttributeToggler</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
toggleWeight <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight <span class="token operator">===</span> <span class="token string">'bold'</span> <span class="token operator">?</span> <span class="token string">'normal'</span> <span class="token punctuation">:</span> <span class="token string">'bold'</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>
|
||||
increaseSize<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 punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
increaseSize <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize <span class="token operator">+</span> <span class="token number">1</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 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">var</span> curStyle <span class="token operator">=</span> <span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontWeight<span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fontSize<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -646,14 +648,13 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> TextExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<Text>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Base component for rendering styled text.'</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>
|
||||
class <span class="token class-name">TextExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<Text>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Base component for rendering styled text.'</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>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"<Text>"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Wrap"</span><span class="token operator">></span>
|
||||
@@ -983,7 +984,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
backgroundColorText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -165,8 +165,8 @@ maintaining selection information for a document.</p><p>Some functionality that
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> WithLabel <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>
|
||||
class <span class="token class-name">WithLabel</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>labelContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>label<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -175,20 +175,18 @@ maintaining selection information for a document.</p><p>Some functionality that
|
||||
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> TextEventsExample <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prevText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev2Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev3Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</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>
|
||||
class <span class="token class-name">TextEventsExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prevText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev2Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev3Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
updateText<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
updateText <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> text<span class="token punctuation">,</span>
|
||||
@@ -197,9 +195,9 @@ maintaining selection information for a document.</p><p>Some functionality that
|
||||
prev3Text<span class="token punctuation">:</span> state<span class="token punctuation">.</span>prev2Text<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 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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<TextInput
|
||||
@@ -236,7 +234,7 @@ maintaining selection information for a document.</p><p>Some functionality that
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
class <span class="token class-name">AutoExpandingTextInput</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
||||
@@ -376,12 +374,12 @@ class <span class="token class-name">TokenizedTextExample</span> extends <span c
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> BlurOnSubmitExample <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>
|
||||
<span class="token function">focusNextField<span class="token punctuation">(</span></span>nextField<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">BlurOnSubmitExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
focusNextField <span class="token operator">=</span> <span class="token punctuation">(</span>nextField<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>nextField<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">focus<span class="token punctuation">(</span></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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<TextInput
|
||||
@@ -428,7 +426,7 @@ class <span class="token class-name">TokenizedTextExample</span> extends <span c
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
page<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
@@ -868,16 +866,14 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> TextEventsExample <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prevText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev2Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</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>
|
||||
class <span class="token class-name">TextEventsExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prevText<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
prev2Text<span class="token punctuation">:</span> <span class="token string">'<No Event>'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
updateText<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
updateText <span class="token operator">=</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
curText<span class="token punctuation">:</span> text<span class="token punctuation">,</span>
|
||||
@@ -885,9 +881,9 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
prev2Text<span class="token punctuation">:</span> state<span class="token punctuation">.</span>prevText<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 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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<TextInput
|
||||
@@ -915,7 +911,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
class <span class="token class-name">AutoExpandingTextInput</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>
|
||||
@@ -1026,12 +1022,12 @@ class <span class="token class-name">TokenizedTextExample</span> extends <span c
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> BlurOnSubmitExample <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>
|
||||
<span class="token function">focusNextField<span class="token punctuation">(</span></span>nextField<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
class <span class="token class-name">BlurOnSubmitExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
focusNextField <span class="token operator">=</span> <span class="token punctuation">(</span>nextField<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>nextField<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">focus<span class="token punctuation">(</span></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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<TextInput
|
||||
@@ -1078,7 +1074,7 @@ class <span class="token class-name">TokenizedTextExample</span> extends <span c
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
multiline<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -31,27 +31,19 @@ being undefined. <strong>Always</strong> check whether the <code>action</code> b
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> TimePickerAndroidExample <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>
|
||||
class <span class="token class-name">TimePickerAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'TimePickerAndroid'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Standard Android time picker dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'TimePickerAndroid'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Standard Android time picker dialog'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
isoFormatText<span class="token punctuation">:</span> <span class="token string">'pick a time (24-hour format)'</span><span class="token punctuation">,</span>
|
||||
presetHour<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
presetMinute<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
presetText<span class="token punctuation">:</span> <span class="token string">'pick a time, default: 4:04AM'</span><span class="token punctuation">,</span>
|
||||
simpleText<span class="token punctuation">:</span> <span class="token string">'pick a time'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time
|
||||
</span> <span class="token comment" spellcheck="true"> // picked by the user and makes it so the next time they open it the hour and minute they picked
|
||||
</span> <span class="token comment" spellcheck="true"> // before is displayed.
|
||||
</span> <span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
isoFormatText<span class="token punctuation">:</span> <span class="token string">'pick a time (24-hour format)'</span><span class="token punctuation">,</span>
|
||||
presetHour<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
presetMinute<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||||
presetText<span class="token punctuation">:</span> <span class="token string">'pick a time, default: 4:04AM'</span><span class="token punctuation">,</span>
|
||||
simpleText<span class="token punctuation">:</span> <span class="token string">'pick a time'</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>
|
||||
|
||||
async <span class="token function">showPicker<span class="token punctuation">(</span></span>stateKey<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
showPicker <span class="token operator">=</span> async <span class="token punctuation">(</span>stateKey<span class="token punctuation">,</span> options<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
const <span class="token punctuation">{</span>action<span class="token punctuation">,</span> minute<span class="token punctuation">,</span> hour<span class="token punctuation">}</span> <span class="token operator">=</span> await TimePickerAndroid<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> newState <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
@@ -66,7 +58,7 @@ being undefined. <strong>Always</strong> check whether the <code>action</code> b
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>code<span class="token punctuation">,</span> message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">warn<span class="token punctuation">(</span></span>`Error <span class="token keyword">in</span> example <span class="token string">'${stateKey}'</span><span class="token punctuation">:</span> `<span class="token punctuation">,</span> message<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 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>
|
||||
@@ -99,8 +91,8 @@ being undefined. <strong>Always</strong> check whether the <code>action</code> b
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment" spellcheck="true">/**
|
||||
* Returns e.g. '3:05'.
|
||||
|
||||
@@ -14,18 +14,12 @@ ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER</p></div><span><h3><a
|
||||
<span class="token keyword">var</span> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'UIExplorerBlock'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> UIExplorerPage <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'UIExplorerPage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ToastExample <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>
|
||||
class <span class="token class-name">ToastExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'Toast Example'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Example that demonstrates the use of an Android Toast to provide feedback.'</span><span class="token punctuation">;</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Toast Example'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Example that demonstrates the use of an Android Toast to provide feedback.'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
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">return</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 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>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"ToastAndroid"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Simple toast"</span><span class="token operator">></span>
|
||||
@@ -80,8 +74,8 @@ ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER</p></div><span><h3><a
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></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>
|
||||
<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>
|
||||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -51,22 +51,20 @@ In addition to this property you need to add</p><p> android:supportsRtl="t
|
||||
<span class="token keyword">var</span> SwitchAndroid <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'SwitchAndroid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ToolbarAndroid <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'ToolbarAndroid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> ToolbarAndroidExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<ToolbarAndroid>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Examples of using the Android toolbar.'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
actionText<span class="token punctuation">:</span> <span class="token string">'Example app with toolbar component'</span><span class="token punctuation">,</span>
|
||||
toolbarSwitch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
colorProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
titleColor<span class="token punctuation">:</span> <span class="token string">'#3b5998'</span><span class="token punctuation">,</span>
|
||||
subtitleColor<span class="token punctuation">:</span> <span class="token string">'#6a7180'</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>
|
||||
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>
|
||||
class <span class="token class-name">ToolbarAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<ToolbarAndroid>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Examples of using the Android toolbar.'</span><span class="token punctuation">;</span>
|
||||
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
actionText<span class="token punctuation">:</span> <span class="token string">'Example app with toolbar component'</span><span class="token punctuation">,</span>
|
||||
toolbarSwitch<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
colorProps<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
titleColor<span class="token punctuation">:</span> <span class="token string">'#3b5998'</span><span class="token punctuation">,</span>
|
||||
subtitleColor<span class="token punctuation">:</span> <span class="token string">'#6a7180'</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 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>
|
||||
<UIExplorerPage title<span class="token operator">=</span><span class="token string">"<ToolbarAndroid>"</span><span class="token operator">></span>
|
||||
<UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Toolbar with title/subtitle and actions"</span><span class="token operator">></span>
|
||||
@@ -133,13 +131,14 @@ In addition to this property you need to add</p><p> android:supportsRtl="t
|
||||
<<span class="token operator">/</span>UIExplorerBlock<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>UIExplorerPage<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_onActionSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
_onActionSelected <span class="token operator">=</span> <span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
actionText<span class="token punctuation">:</span> <span class="token string">'Selected '</span> <span class="token operator">+</span> toolbarActions<span class="token punctuation">[</span>position<span class="token punctuation">]</span><span class="token punctuation">.</span>title<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 punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> toolbarActions <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">'Create'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'image!ic_create_black_48dp'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -155,12 +155,10 @@ memory. Test and measure when using this property.</p></div></div></div></div><d
|
||||
<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> ViewBorderStyleExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
showBorder<span class="token punctuation">:</span> <span class="token boolean">true</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">ViewBorderStyleExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
showBorder<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
@@ -189,19 +187,17 @@ memory. Test and measure when using this property.</p></div></div></div></div><d
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></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">_handlePress<span class="token punctuation">(</span></span><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>showBorder<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showBorder<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> ZIndexExample <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>
|
||||
<span class="token function">getInitialState<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>
|
||||
flipped<span class="token punctuation">:</span> <span class="token boolean">false</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>showBorder<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showBorder<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>
|
||||
|
||||
class <span class="token class-name">ZIndexExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
flipped<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
const indices <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>flipped <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
@@ -236,12 +232,12 @@ memory. Test and measure when using this property.</p></div></div></div></div><d
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></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">_handlePress<span class="token punctuation">(</span></span><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>flipped<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>flipped<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>
|
||||
|
||||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>flipped<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>flipped<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>
|
||||
|
||||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<View>'</span><span class="token punctuation">;</span>
|
||||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Basic building block of all UI, examples that '</span> <span class="token operator">+</span>
|
||||
|
||||
@@ -47,9 +47,7 @@ The page scrolling state can be in 3 states:
|
||||
callback will have following fields:
|
||||
- position - index of page that has been selected</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagemargin"></a>pageMargin <span class="propType">ReactPropTypes.number</span> <a class="hash-link" href="docs/viewpagerandroid.html#pagemargin">#</a></h4><div><p>Blank space to show between pages. This is only visible while scrolling, pages are still
|
||||
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">ReactPropTypes.bool</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
|
||||
The default value is true.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/viewpagerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setpage"></a>setPage<span class="methodType">(selectedPage)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpage">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
|
||||
The transition between pages will be animated.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setpagewithoutanimation"></a>setPageWithoutAnimation<span class="methodType">(selectedPage)</span> <a class="hash-link" href="docs/viewpagerandroid.html#setpagewithoutanimation">#</a></h4><div><p>A helper function to scroll to a specific page in the ViewPager.
|
||||
The transition between pages will <em>not</em> be animated.</p></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/viewpagerandroid.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewpagerscrollstate"></a>ViewPagerScrollState <a class="hash-link" href="docs/viewpagerandroid.html#viewpagerscrollstate">#</a></h4><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>idle</td><td class="description"><noscript></noscript></td></tr><tr><td>dragging</td><td class="description"><noscript></noscript></td></tr><tr><td>settling</td><td class="description"><noscript></noscript></td></tr></tbody></table></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/viewpagerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
The default value is true.</p></div></div></div><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/viewpagerandroid.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewpagerscrollstate"></a>ViewPagerScrollState <a class="hash-link" href="docs/viewpagerandroid.html#viewpagerscrollstate">#</a></h4><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>idle</td><td class="description"><noscript></noscript></td></tr><tr><td>dragging</td><td class="description"><noscript></noscript></td></tr><tr><td>settling</td><td class="description"><noscript></noscript></td></tr></tbody></table></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/viewpagerandroid.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ViewPagerAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -75,16 +73,16 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
|
||||
<span class="token string">'http://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> LikeCount <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>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
likes<span class="token punctuation">:</span> <span class="token number">7</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>
|
||||
onClick<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>
|
||||
class <span class="token class-name">LikeCount</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
likes<span class="token punctuation">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
onClick <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>likes<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>likes <span class="token operator">+</span> <span class="token number">1</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 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">var</span> thumbsUp <span class="token operator">=</span> <span class="token string">'\uD83D\uDC4D'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>likeContainer<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -98,16 +96,17 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
|
||||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">var</span> Button <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>
|
||||
_handlePress<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>
|
||||
class <span class="token class-name">Button</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>enabled && <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPress<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPress<span class="token punctuation">(</span></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 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>
|
||||
<TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_handlePress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>enabled <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>buttonDisabled<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
@@ -116,10 +115,10 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
|
||||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></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> ProgressBar <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>
|
||||
class <span class="token class-name">ProgressBar</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</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">var</span> fractionalPosition <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>progress<span class="token punctuation">.</span>position <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>progress<span class="token punctuation">.</span>offset<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> progressBarSize <span class="token operator">=</span> <span class="token punctuation">(</span>fractionalPosition <span class="token operator">/</span> <span class="token punctuation">(</span>PAGES <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -128,43 +127,40 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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> ViewPagerAndroidExample <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>
|
||||
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'<ViewPagerAndroid>'</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'Container that allows to flip left and right between child views.'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
page<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
animationsAreEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
scrollEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
progress<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
position<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
offset<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
class <span class="token class-name">ViewPagerAndroidExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
static title <span class="token operator">=</span> <span class="token string">'<ViewPagerAndroid>'</span><span class="token punctuation">;</span>
|
||||
static description <span class="token operator">=</span> <span class="token string">'Container that allows to flip left and right between child views.'</span><span class="token punctuation">;</span>
|
||||
|
||||
onPageSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
page<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
animationsAreEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
scrollEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
progress<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
position<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||
offset<span class="token punctuation">:</span> <span class="token number">0</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>
|
||||
|
||||
onPageSelected <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>page<span class="token punctuation">:</span> e<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>position<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>
|
||||
|
||||
onPageScroll<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onPageScroll <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>progress<span class="token punctuation">:</span> e<span class="token punctuation">.</span>nativeEvent<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>
|
||||
|
||||
onPageScrollStateChanged<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>state <span class="token punctuation">:</span> ViewPagerScrollState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onPageScrollStateChanged <span class="token operator">=</span> <span class="token punctuation">(</span>state <span class="token punctuation">:</span> ViewPagerScrollState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>scrollState<span class="token punctuation">:</span> state<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>
|
||||
|
||||
move<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>delta<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
move <span class="token operator">=</span> <span class="token punctuation">(</span>delta<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> page <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>page <span class="token operator">+</span> delta<span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">go<span class="token punctuation">(</span></span>page<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>
|
||||
|
||||
go<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
go <span class="token operator">=</span> <span class="token punctuation">(</span>page<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationsAreEnabled<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>viewPager<span class="token punctuation">.</span><span class="token function">setPage<span class="token punctuation">(</span></span>page<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
@@ -172,9 +168,9 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <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>page<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>
|
||||
|
||||
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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> pages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i < PAGES<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> pageStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
@@ -237,8 +233,8 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
<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>
|
||||
buttons<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -33,7 +33,7 @@ settings for <code>UIScrollViewDecelerationRateNormal</code> and
|
||||
<code>UIScrollViewDecelerationRateFast</code> respectively:</p><ul><li>normal: 0.998</li><li>fast: 0.99 (the default for iOS web view)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Function that allows custom handling of any web view requests. Return
|
||||
<code>true</code> from the function to continue loading the request and <code>false</code>
|
||||
to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4><div><p>Boolean value that determines whether scrolling is enabled in the
|
||||
<code>WebView</code>. The default value is <code>true</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/webview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="goforward"></a>goForward<span class="methodType">(0)</span> <a class="hash-link" href="docs/webview.html#goforward">#</a></h4><div><p>Go forward one page in the web view's history.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="goback"></a>goBack<span class="methodType">(0)</span> <a class="hash-link" href="docs/webview.html#goback">#</a></h4><div><p>Go back one page in the web view's history.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="reload"></a>reload<span class="methodType">(0)</span> <a class="hash-link" href="docs/webview.html#reload">#</a></h4><div><p>Reloads the current page.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stoploading"></a>stopLoading<span class="methodType">(0)</span> <a class="hash-link" href="docs/webview.html#stoploading">#</a></h4><div><p>Stop loading the current page.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getwebviewhandle"></a>getWebViewHandle<span class="methodType">(0): </span> <a class="hash-link" href="docs/webview.html#getwebviewhandle">#</a></h4><div><p>Returns the native <code>WebView</code> node.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||||
<code>WebView</code>. The default value is <code>true</code>.</p></div></div></div></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -55,30 +55,27 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
<span class="token keyword">var</span> WEBVIEW_REF <span class="token operator">=</span> <span class="token string">'webview'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> DEFAULT_URL <span class="token operator">=</span> <span class="token string">'https://m.facebook.com'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> WebViewExample <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>
|
||||
class <span class="token class-name">WebViewExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> DEFAULT_URL<span class="token punctuation">,</span>
|
||||
status<span class="token punctuation">:</span> <span class="token string">'No Page Loaded'</span><span class="token punctuation">,</span>
|
||||
backButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
forwardButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
scalesPageToFit<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
url<span class="token punctuation">:</span> DEFAULT_URL<span class="token punctuation">,</span>
|
||||
status<span class="token punctuation">:</span> <span class="token string">'No Page Loaded'</span><span class="token punctuation">,</span>
|
||||
backButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
forwardButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
scalesPageToFit<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
inputText <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
||||
|
||||
inputText<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||||
|
||||
handleTextInputChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
handleTextInputChange <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> url <span class="token operator">=</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>text<span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex">/^[a-zA-Z-_]+:/</span><span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>url<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
url <span class="token operator">=</span> <span class="token string">'http://'</span> <span class="token operator">+</span> url<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>inputText <span class="token operator">=</span> url<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>inputText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
@@ -133,26 +130,26 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
goBack<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>
|
||||
goBack <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">goBack<span class="token punctuation">(</span></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>
|
||||
|
||||
goForward<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>
|
||||
goForward <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">goForward<span class="token punctuation">(</span></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>
|
||||
|
||||
reload<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>
|
||||
reload <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reload<span class="token punctuation">(</span></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>
|
||||
|
||||
onShouldStartLoadWithRequest<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onShouldStartLoadWithRequest <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Implement any custom loading logic here, don't forget to return!
|
||||
</span> <span class="token keyword">return</span> <span class="token boolean">true</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>
|
||||
|
||||
onNavigationStateChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>navState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onNavigationStateChange <span class="token operator">=</span> <span class="token punctuation">(</span>navState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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>
|
||||
backButtonEnabled<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>canGoBack<span class="token punctuation">,</span>
|
||||
forwardButtonEnabled<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>canGoForward<span class="token punctuation">,</span>
|
||||
@@ -161,13 +158,13 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
loading<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>loading<span class="token punctuation">,</span>
|
||||
scalesPageToFit<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
|
||||
onSubmitEditing<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
onSubmitEditing <span class="token operator">=</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pressGoButton<span class="token punctuation">(</span></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>
|
||||
|
||||
pressGoButton<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>
|
||||
pressGoButton <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputText<span class="token punctuation">.</span><span class="token function">toLowerCase<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>url <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<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">reload<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -178,17 +175,17 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true"> // dismiss keyboard
|
||||
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>TEXT_INPUT_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">blur<span class="token punctuation">(</span></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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> Button <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>
|
||||
_handlePress<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>
|
||||
class <span class="token class-name">Button</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>enabled <span class="token operator">!</span><span class="token operator">==</span> <span class="token boolean">false</span> && <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPress<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPress<span class="token punctuation">(</span></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 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>
|
||||
<TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_handlePress<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<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">></span>
|
||||
@@ -197,17 +194,14 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></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> ScaledWebView <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>
|
||||
class <span class="token class-name">ScaledWebView</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
scalingEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
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">return</span> <span class="token punctuation">{</span>
|
||||
scalingEnabled<span class="token punctuation">:</span> <span class="token boolean">true</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 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>
|
||||
<View<span class="token operator">></span>
|
||||
<WebView
|
||||
@@ -233,8 +227,8 @@ to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></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>
|
||||
|
||||
<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>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
|
||||
Reference in New Issue
Block a user