React Native之ViewPagerAndroid跳转页面问题

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

前言：网上目前react-native的教程较少，加上许多帖子还是用的ES5（2015年6月已发布ES6标准），有些细节很难找到答案，这里把遇到的问题做一个分享，让学习者尽量少踩坑。

出现问题：

1.怎么获取ViewPager控件

2.怎么定义函数,使用setPage(),去跳转页面。

3.在使用了bind()的情况下,函数怎么传参。

解决方法：

步1.使用ref获取真实的DOM节点，类似去给控件设置id。

步2.函数定义方式：

_onPageClick(position){
this.refs.viewPage.setPage(position);
}

步3.按钮的onPress()事件：

完整ViewPagerAndroid代码：

'use strict'import React, { Component } from 'react';
import {
TouchableOpacity,
View,
Text,
StyleSheet,
ViewPagerAndroid,
} from 'react-native'export default class MyViewPager extends Component{
constructor(props){
super(props);
this.state = {
selectedPage : 0,
};
}
/**接收传递过来的参数 */
componentDidMount(){
} _onPageClick(position){
this.refs.viewPage.setPage(position);
} render(){
return (
<View>
<View style={{flexDirection:'row'}}>
<View style={styles.tab}>
<TouchableOpacity onPress={this._onPageClick.bind(this,0)}>
<Text style={{textAlign:'center'}}>第一页</Text>
</TouchableOpacity>
</View>
<View style={styles.tab}>
<TouchableOpacity onPress={this._onPageClick.bind(this,1)}>
<Text style={{textAlign:'center'}}>第二页</Text>
</TouchableOpacity>
</View>
</View>
<ViewPagerAndroid style={styles.pageStyle} initialPage={this.state.selectedPage} ref="viewPage">
<View style={{backgroundColor:"red"}}>
<Text>First Page!</Text>
</View>
<View style={{backgroundColor:"yellow"}}>
<Text>Second Page!</Text>
</View>
</ViewPagerAndroid>
</View>
)
}
}var styles = 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,
},
});