React Native从零开始（九）ViewPagerAndroid的使用，和简单框架搭建

React Native从零开始（九）ViewPagerAndroid的使用，和简单框架搭建

先上一下效果图，在最后会给出源码

一、ViewPagerAndroid的基本使用

做过Android开发的程序猿对于ViewPager应该都很熟悉，使用起来也是得心应手的。但是React Native的ViewPagerAndroid相对于Android来说更加的简单。跟其他的组件一样声明然后使用即可。

下面代码中的每一个View就是ViewPager的每个页，注意，他的子视图必须是View，也就是说他是根据View来判断你有多少个页面。

render: function() {
  return (
    <ViewPagerAndroid
      style={styles.viewPager}
      initialPage={0}>
      <View style={styles.pageStyle}>
        <Text>First page</Text>
      </View>
      <View style={styles.pageStyle}>
        <Text>Second page</Text>
      </View>
    </ViewPagerAndroid>
  );
}

你可以给每个子视图设置样式属性譬如padding或backgroundColor。

他跟Android的ViewPager基本相同，连监听的函数都类似，大家可以看下文档上面写的很清楚。

二、利用ViewPagerAndroid搭建框架

1、首先我们需要将这个页面分成3部分，分别为头部、ViewPagerAndroid和底部，利用RN的flex比例来将其划分出来

结构就如同这个View一样，最上面的子View是头部、然后是Pager再是底部。我们在底部加上点击按钮TouchableOpacity，然后搭建布局即可。

2、创建3个页面

class FirstPage extends Component{
    render(){
        return(
            <View>
                <Text>首页</Text>
            </View>
        );
    }
}
class SecondPage extends Component{
    render(){
        return(
            <View style={[{backgroundColor:"green"}]}>
                <Text>发现</Text>
            </View>
        );
    }
}
class ThirdPage extends Component{
    render(){
        return(
            <View style={[{backgroundColor:"yellow"}]}>
                <Text>我的</Text>
            </View>
        );
    }
}

3、将页面放入ViewPager中并加上点击事件

  <ViewPagerAndroid
                style={styles.body}
                ref={viewPager => { this.viewPager = viewPager; }}
                keyboardDismissMode={"on-drag"}
                onPageSelected={(event) => {
                    let text = "呵呵";
                    if(event.nativeEvent.position==0){
                        text = "首页"
                    }else if(event.nativeEvent.position==1){
                        text = "发现"
                    }else{
                        text = "我的"
                    }
                    this.setState({
                        page:text
                    });
                }}
            >

其中我们利用onPageSelected来获取当前的页面来更改标题的文字、ref函数来使得外部的函数能够调用这个viewpager。

三、献上渣渣源码

在这里利用了state来控制他的文字和图片的显示，还有背景色的变化，也可以将TouchableOpacity换成button也行、反正你开心就好

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ViewPagerAndroid,
  TouchableOpacity,
    Image
} from 'react-native';
function btn1() {
    this.viewPager.setPage(0);
    this.touch.setBackgroundColor = "white";
    this.setState({
        page:"首页",
        color1:"blue",
        color2:"#33cdee",
        color3:"#33cdee",
        imageUrl1: require("./Images/activity_check.png"),
        imageUrl2: require("./Images/order_normal.png"),
        imageUrl3: require("./Images/ticket_normal.png"),
        textColor1:"red",
        textColor2:"black",
        textColor3:"black"
    })

}
function btn2() {
    this.viewPager.setPage(1);
    this.touch.setBackgroundColor = "white";
    this.setState({
        page:"发现",
        color1:"#33cdee",
        color2:"blue",
        color3:"#33cdee",
        imageUrl1: require("./Images/activity_normal.png"),
        imageUrl2: require("./Images/order_check.png"),
        imageUrl3: require("./Images/ticket_normal.png"),
        textColor1:"black",
        textColor2:"red",
        textColor3:"black"
    })
}
function btn3() {
    this.viewPager.setPage(2);
    this.setState({
        page:"我的",
        color1:"#33cdee",
        color2:"#33cdee",
        color3:"blue",
        imageUrl1: require("./Images/activity_normal.png"),
        imageUrl2: require("./Images/order_normal.png"),
        imageUrl3: require("./Images/ticket_check.png"),
        textColor1:"black",
        textColor2:"black",
        textColor3:"red"
    })
}
class FirstPage extends Component{
    render(){
        return(
            <View>
                <Text>首页</Text>
            </View>
        );
    }
}
class SecondPage extends Component{
    render(){
        return(
            <View style={[{backgroundColor:"green"}]}>
                <Text>发现</Text>
            </View>
        );
    }
}
class ThirdPage extends Component{
    render(){
        return(
            <View style={[{backgroundColor:"yellow"}]}>
                <Text>我的</Text>
            </View>
        );
    }
}
export default class ViewPagerDemo extends Component {
    constructor(props){
        super(props)
        this.state = {
            page: "首页",
            color1: "blue",
            color2: "#33cdee",
            color3: "#33cdee",
            imageUrl1: require("./Images/activity_check.png"),
            imageUrl2: require("./Images/order_normal.png"),
            imageUrl3: require("./Images/ticket_normal.png"),
            textColor1:"red",
            textColor2:"black",
            textColor3:"black"
        };
    }
  render() {
    return (
        <View style={styles.container}>
            <View style={styles.title}>
                <Text style={styles.titleText}>{this.state.page}</Text>
            </View>
            <ViewPagerAndroid
                style={styles.body}
                ref={viewPager => { this.viewPager = viewPager; }}
                keyboardDismissMode={"on-drag"}
                onPageSelected={(event) => {
                    let text = "呵呵";
                    if(event.nativeEvent.position==0){
                        text = "首页"
                    }else if(event.nativeEvent.position==1){
                        text = "发现"
                    }else{
                        text = "我的"
                    }
                    this.setState({
                        page:text
                    });
                }}
            >
                <FirstPage/>
                <SecondPage/>
                <ThirdPage/>
            </ViewPagerAndroid>
            <View style={styles.foot}>
                <TouchableOpacity style={[styles.btnFlex,{backgroundColor:this.state.color1}]} onPress={btn1.bind(this)}  ref={touch => { this.touch = touch; }}>
                    <Image style={styles.imageStyle} source={this.state.imageUrl1} resizeMethod={"resize"}/>
                    <Text style={[styles.btnText,{color:this.state.textColor1}]}>首页</Text>
                </TouchableOpacity>
                <TouchableOpacity  style={[styles.btnFlex,{backgroundColor:this.state.color2}]} onPress={btn2.bind(this)} ref={touch => { this.touch = touch; }}>
                    <Image style={styles.imageStyle} source={this.state.imageUrl2} resizeMethod={"resize"}/>
                    <Text style={[styles.btnText,{color:this.state.textColor2}]}>发现</Text>
                </TouchableOpacity>
                <TouchableOpacity  style={[styles.btnFlex,{backgroundColor:this.state.color3}]} onPress={btn3.bind(this)} ref={touch => { this.touch = touch; }}>
                    <Image style={styles.imageStyle} source={this.state.imageUrl3} resizeMethod={"resize"}/>
                    <Text style={[styles.btnText,{color:this.state.textColor3}]}>我的</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:"column"
    },
    title:{
        flex:1,
        justifyContent:"center",
        alignItems:"center",
        backgroundColor:"#33cdee"
    },
    titleText:{
        fontSize:20,
        fontWeight:"bold",
        color:"white"
    },
    body:{
        flex:8
    },
    foot:{
        flex:1,
        flexDirection:"row"
    },
    btnFlex:{
        flex:1,
        justifyContent:"center",
        alignItems:"center",
        padding:5
    },
    btnText:{
        flex:1,
        fontSize:12,
        fontWeight:"bold",
        marginTop:5
    },
    imageStyle:{
        flex:1,
        resizeMode:'contain'
    }

});

AppRegistry.registerComponent('ViewPagerDemo', () => ViewPagerDemo);

大家可以加好友交流学习

QQ：1115856293

微信：