前言：?網上目前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);因為這個頁面不是我的起始頁。

模擬器頁面截圖：

?

轉載于:https://www.cnblogs.com/Sweet-Candy/p/5694723.html

總結

以上是生活随笔為你收集整理的React Native之ViewPagerAndroid跳转页面问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。