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-29 09:25:20 +00:00
parent 8c81da4991
commit c52b764ee5
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/viewpagerandroid.html
+17 -1
View File
@@ -34,7 +34,12 @@ The <code>event.nativeEvent</code> object for this callback will carry following
- position - index of first page from the left that is currently visible
- offset - value from range [0,1) describing stage between page transitions.
Value x means that (1 - x) fraction of the page at &quot;position&quot; index is
visible, and x fraction of the next page is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpageselected"></a>onPageSelected <span class="propType">function</span> <a class="hash-link" href="#onpageselected">#</a></h4><div><p>This callback will be called once ViewPager finish navigating to selected page
visible, and x fraction of the next page is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescrollstatechanged"></a>onPageScrollStateChanged <span class="propType">function</span> <a class="hash-link" href="#onpagescrollstatechanged">#</a></h4><div><p>Function called when the page scrolling state has changed.
The page scrolling state can be in 3 states:
- idle, meaning there is no interaction with the page scroller happening at the time
- dragging, meaning there is currently an interaction with the page scroller
- settling, meaning that there was an interaction with the page scroller, and the
page scroller is now finishing it&#x27;s closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpageselected"></a>onPageSelected <span class="propType">function</span> <a class="hash-link" href="#onpageselected">#</a></h4><div><p>This callback will be called once ViewPager finish navigating to selected page
(when user swipes between pages). The <code>event.nativeEvent</code> object passed to this
callback will have following fields:
- position - index of page that has been selected</p></div></div></div></div><div><h3><a class="anchor" name="examples"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewPagerAndroidExample.android.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>
@@ -50,6 +55,8 @@ callback will have following fields:
ViewPagerAndroid<span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
import type <span class="token punctuation">{</span> ViewPagerScrollState <span class="token punctuation">}</span> from <span class="token string">&#x27;ViewPagerAndroid&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> PAGES <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> BGCOLOR <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&#x27;#fdc08e&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;#fff6b9&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;#99d1b7&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;#dde5fe&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;#f79273&#x27;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> IMAGE_URIS <span class="token operator">=</span> <span class="token punctuation">[</span>
@@ -139,6 +146,10 @@ callback will have following fields:
<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>
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>
<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>
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>
<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>
@@ -180,6 +191,7 @@ callback will have following fields:
initialPage<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span>
onPageScroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPageScroll<span class="token punctuation">}</span>
onPageSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPageSelected<span class="token punctuation">}</span>
onPageScrollStateChanged<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPageScrollStateChanged<span class="token punctuation">}</span>
ref<span class="token operator">=</span><span class="token punctuation">{</span>viewPager <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>viewPager <span class="token operator">=</span> viewPager<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>pages<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>ViewPagerAndroid<span class="token operator">&gt;</span>
@@ -195,6 +207,7 @@ callback will have following fields:
enabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</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>animationsAreEnabled<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 operator">/</span><span class="token operator">&gt;</span> <span class="token punctuation">}</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>scrollStateText<span class="token punctuation">}</span><span class="token operator">&gt;</span>ScrollState<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>scrollState<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;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttons<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Button text<span class="token operator">=</span><span class="token string">&quot;Start&quot;</span> enabled<span class="token operator">=</span><span class="token punctuation">{</span>page <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">go<span class="token punctuation">(</span></span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
@@ -232,6 +245,9 @@ callback will have following fields:
buttonText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
scrollStateText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">&#x27;#99d1b7&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
container<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>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>