Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update website

Browse Source
This commit is contained in:
Travis CI
2016-01-14 12:48:37 +00:00
parent 43d5f153b6
commit 3976ddd5a5
1 changed files with 126 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/cameraroll.html
+126 -1
View File
@@ -5,7 +5,132 @@ be stored in memory (and consume memory as long as the process is alive)</li></u
roll of the device matching shape defined by <code>getPhotosReturnChecker</code>.</p><p> @param {object} params See <code>getPhotosParamChecker</code>.
@param {function} callback Invoked with arg of shape defined by
<code>getPhotosReturnChecker</code> on success.
@param {function} errorCallback Invoked with error message on error.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="dimensions.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
@param {function} errorCallback Invoked with error message on error.</p></div></div></div></span></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/CameraRollExample.js">Edit on GitHub</a>Examples <a class="hash-link" href="#examples">#</a></h3><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
const React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const <span class="token punctuation">{</span>
CameraRoll<span class="token punctuation">,</span>
Image<span class="token punctuation">,</span>
SliderIOS<span class="token punctuation">,</span>
StyleSheet<span class="token punctuation">,</span>
Switch<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
TouchableOpacity
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
const CameraRollView <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./CameraRollView&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const AssetScaledImageExampleView <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./AssetScaledImageExample&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const CAMERA_ROLL_VIEW <span class="token operator">=</span> <span class="token string">&#x27;camera_roll_view&#x27;</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">&#x27;SavedPhotos&#x27;</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>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;Switch
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onSwitchChange<span class="token punctuation">}</span>
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>bigImages<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">(</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 string">&#x27;Big&#x27;</span> <span class="token punctuation">:</span> <span class="token string">&#x27;Small&#x27;</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&#x27; Images&#x27;</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;SliderIOS
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>sliderValue<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onSliderChange<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token string">&#x27;Group Type: &#x27;</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>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;CameraRollView
ref<span class="token operator">=</span><span class="token punctuation">{</span>CAMERA_ROLL_VIEW<span class="token punctuation">}</span>
batchSize<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">20</span><span class="token punctuation">}</span>
groupTypes<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>groupTypes<span class="token punctuation">}</span>
renderImage<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderImage<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<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>
<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">&#x27;Camera Roll Image&#x27;</span><span class="token punctuation">,</span>
component<span class="token punctuation">:</span> AssetScaledImageExampleView<span class="token punctuation">,</span>
backButtonTitle<span class="token punctuation">:</span> <span class="token string">&#x27;Back&#x27;</span><span class="token punctuation">,</span>
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 function">_renderImage<span class="token punctuation">(</span></span>asset<span class="token punctuation">)</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>
JSON<span class="token punctuation">.</span><span class="token function">stringify<span class="token punctuation">(</span></span>asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>location<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token string">&#x27;Unknown location&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;TouchableOpacity key<span class="token operator">=</span><span class="token punctuation">{</span>asset<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>loadAsset<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span> <span class="token keyword">this</span><span class="token punctuation">,</span> asset <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>row<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image
source<span class="token operator">=</span><span class="token punctuation">{</span>asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>image<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>imageStyle<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>info<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>url<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span>asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>image<span class="token punctuation">.</span>uri<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>location<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>group_name<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>asset<span class="token punctuation">.</span>node<span class="token punctuation">.</span>timestamp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_onSliderChange<span class="token punctuation">(</span></span>value<span class="token punctuation">)</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 function">_onSwitchChange<span class="token punctuation">(</span></span>value<span class="token punctuation">)</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>
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>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
url<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span>
marginBottom<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
image<span class="token punctuation">:</span> <span class="token punctuation">{</span>
margin<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span 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">&#x27;Camera Roll&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">&#x27;Example component that uses CameraRoll to list user\&#x27;s photos&#x27;</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>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Photos&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;CameraRollExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="dimensions.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)