React Native之ViewPagerAndroid跳轉頁面問題

前言： 網上目前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);由於這個頁面不是個人起始頁。

模擬器頁面截圖：