标签：
前言： 网上目前react-native的教程较少，加上许多帖子还是用的ES5（2015年6月已发布ES6标准），有些细节很难找到答案，这里把遇到的问题做一个分享，让学习者尽量少踩坑。
1.怎么获取ViewPager控件
2.怎么定义函数,使用setPage(),去跳转页面。
3.在使用了bind()的情况下,函数怎么传参。
步1.使用ref获取真实的DOM节点，类似去给控件设置id。
<ViewPagerAndroid style={styles.pageStyle} initialPage={this.state.selectedPage} ref="viewPage">
....
</ViewPagerAndroid>
步2.函数定义方式：
_onPageClick(position){ this.refs.viewPage.setPage(position); }
步3.按钮的onPress()事件：
<TouchableOpacity onPress={this._onPageClick.bind(this,0)}>
....
</TouchableOpacity>
完整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, }, });
ps: 最后没有 AppRegistry.registerComponent(XX, () => XX);因为这个页面不是我的起始页。
模拟器页面截图：
React Native之ViewPagerAndroid跳转页面问题
标签：
原文地址：http://www.cnblogs.com/Sweet-Candy/p/5694723.html
