React Native viewpagerandroid Jump page question

Foreword: The online current react-native of the tutorial is few, add many posts still use ES5 (June 2015 has released ES6 standard), some details difficult to find the answer, here to meet the problem do a share, let learners as little as possible to trample the pit.

A problem occurred:

1. How to get the Viewpager control

2. How to define the function, use Setpage (), go to jump page.

3. In the case of bind (), how the function is used to pass the parameter.

Workaround:

Step 1. Use ref to get the real DOM node, similar to setting the ID for the control.

<viewpagerandroid Style={styles.pagestyle} initialpage={this. state.selectedpage} ref= "ViewPage" >
....
</ViewPagerAndroid>

Step 2. Function definition:

_onpageclick (position) {        this. Refs.viewPage.setPage (position);    }

Step 3. The Onpress () event of the button:

<touchableopacity onpress={_onpageclick.bind (this,0)}>.... </TouchableOpacity>

Full Viewpagerandroid Code:

' Use strict 'import React, {Component} from' React 'Import {touchableopacity, View, Text, StyleSheet, Viewpagerandroid,} from' React-native 'Exportdefaultclass Myviewpager extends component{constructor (props) {super (props);  This. State ={selectedpage:0,        }; }    /** Receive the parameters passed over*/Componentdidmount () {} _onpageclick (position) { This. Refs.viewPage.setPage (position); } render () {return (        <View> <view style={{flexdirection: ' Row '}}> <view style={styles.tab}> & Lt Touchableopacity onpress={ This. _onpageclick.bind ( This, 0)}> <text style={{textalign: ' Center '}}> first page </Text> </touchableopacity > </View> <view style={styles.tab}> <touchableopacity onpress={ This. _onpageclick.bind ( This, 1)}> <text style={{textalign: ' Center '}}> second page </Text> </touchableopacity > </View> </View> <viewpagerandroid style={styles.pagestyle} initialpage={ This. state.selectedpage} ref= "ViewPage" > <view style={{backgroundcolor: "Red"}}> <text&gt ;                First page!</text> </View> <view style={{backgroundcolor: "Yellow"}}> <text>second page!</text> </View> </ViewPagerAndroid> </View>    )    }}varStyles =stylesheet.create ({container: {flex:1, Flexdirection:' Row ', Justifycontent:' Center ', Alignitems:' Center ', BackgroundColor:' #F5FCFF ',}, welcome: {fontSize:20, TextAlign:' Center ', margin:10,}, tab:{height:30, Flex:1,}, Pagestyle: {alignitems:' Center ', padding:20, Height:200,    },});

PS: Finally no appregistry.registercomponent (xx, () = XX); Because this page is not my start page.

Emulator page:

React Native viewpagerandroid jump page question