今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。而且每一个 ViewPagerAndroid 的子容器会被视作一个单独的页,并且会被拉伸填满整个 ViewPagerAndroid。
特别注意:ViewPagerAndroid 中所有的子视图必须是,必须是,必须是纯 View 组件,不能是复合的容器和组件。我们可以给每个子视图设置样式,比如:padding 或者 backgroundColor 。
来,我们看一看 ViewPagerAndroid 有哪些属性或者方法呢?
我们熟悉了这些属性和函数之后,那就应该实践了,其实实践这些东西都很简单,当然代码这东西看起来简单,自己写起来可能就会有问题,所以我们行动来来,做一个实例吧。
来,我们在看代码前,看看例子的效果图,还是那句话:得自己尝试的去敲一遍代码实现,看一遍不管用。效果图如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ViewPagerAndroid,
TouchableOpacity,
Image,
View
} from 'react-native';
var PAGES = 2;
var IMAGE_URIS = [
'http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
'http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
];
export default class ViewPagerDemo extends Component {
state={
page:0,
};
render() {
var pages = [];
for(let i = 0;i < PAGES;i++){
pages.push(
<View key={i} collapsable={false}>
<TouchableOpacity
activeOpacity={1}
onPress={this.onPress}
>
<Image
style={styles.image}
source={{uri:IMAGE_URIS[i]}}>
</Image>
</TouchableOpacity>
</View>
);
}
return (
<View style={styles.container}>
<ViewPagerAndroid style={styles.viewPager}
initialPage={0}
onPageSelected={this.onPageSelected}
>
{pages}
</ViewPagerAndroid>
<Text style={{flex:1,alignSelf:'center'}}>当前第{this.state.page+1}页</Text>
</View>
);
}
onPageSelected=(e)=>{
this.setState({page:e.nativeEvent.position});
}
onPress=()=>{
alert('第'+(this.state.page+1)+'页被点击了');
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
image: {
height: 200,
padding: 20,
},
viewPager: {
flex: 1,
},
});
AppRegistry.registerComponent('ViewPagerDemo', () => ViewPagerDemo);