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
微信：
作者：SuperBigLw 发表于2017/1/20 9:45:19 原文链接
阅读：7 评论：0 查看评论