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);因为这个页面不是我的起始页。

模拟器页面截图：