ScrollView是一个非常基础的控件，作用与重要性也不多少废话了
http://reactnative.cn/docs/0.31/scrollview.html#content 为RN中文网的详细地址大家可以可以查看详细的API，不过RN官方文档的例子都一般特别蛋疼，在附上一些基础的例子，能方便像我这样的菜鸟明白其中的作用
先看一下演示效果
111.gif
//获取屏幕尺寸
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
class EScrollViewDemo extends Component {
render() {
return (
<ScrollView
// 默认为垂直排列 此属性为true改为水平排列
horizontal={true}
// 禁用水平滚动条
showsHorizontalScrollIndicator={false}
// 自动分页限ios
pagingEnabled={true}
// 禁用滚动限ios
// scrollEnabled={false}
>
{this.renderChildView()}
</ScrollView>
);
}
renderChildView(){
// 数组
var allChild = [];
var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
// 遍历
for(var i=0; i<5; i++){
allChild.push(
// 循环排列的view中必须有唯一表示
<View key={i} style={{backgroundColor:colors[i], width:width, height:120}}>
<Text style={{flex:1,fontSize:20,marginTop:50,marginLeft:100}}>{colors[i]}</Text>
</View>
);
}
// 返回数组，不然怎么显示出来
return allChild;
}
}
记得要引入ScrollView呦，不然就GG了
以下例子适用于iOS，因为部分功能不适用Android ，如果是Android 有专门的ViewPagerAndroid控件，这个虽然有点蛋蛋的忧伤，但是相信不久的将来RN会弥补上这些缺陷的
// 获取屏幕宽高
var Dimensions = require('Dimensions');
var{width,height}=Dimensions.get('window');
// 获取json数据，真实场景中可以获取网络数据
var ImageData = require('./ImageData.json');
class imageLunBo extends Component {
// ES6写法，初始化变量
constructor(props){
super(props);
this.state = {
//
currentPage :0
};
}
componentDidMount(){
// 屏幕加载完毕后调用定时器
this.startTimer();
}
render() {
return (
<View style={styles.container}>
<ScrollView
ref="ScrollView"
// 设置横向排列
horizontal={true}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
// 自动分页效果，Android无此效果
pagingEnabled={true}
// 开始拖拽
onScrollBeginDrag={this.onScrollBeginDrag}
// 停止拖拽
onScrollEndDrag={this.onScrollEndDrag}
// 当滑动后的回调
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
>
{this.renderAllImage()}
</ScrollView>
<View style={styles.pageViewStyle}>
{this.renderPageCircle()}
</View>
</View>
);
}
onScrollBeginDrag(){
console.log('开始触摸');
}
onScrollEndDrag(){
console.log('结束触摸');
}
onAnimationEnd(e){
// 获取滑动的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
// 通过偏移量和屏幕宽度计算第几页
var currentPage = Math.floor(offSetX/width);
// 更新值已获取屏幕更新
this.setState({
currentPage:currentPage
});
}
renderAllImage(){
// 将图片放入数组
var allImage = [];
var ImagsArr = ImageData.data;
for(var i=0; i<ImagsArr.length;i++){
var ImageItem = ImagsArr[i];
allImage.push(
<Image key={i} source={{uri:ImageItem.img}} style={{width:width,height:200}}/>
);
}
return allImage;
}
renderPageCircle(){
var allCircle=[];
var style;
var ImagsArr = ImageData.data;
for (var index = 0; index < ImagsArr.length; index++) {
style = (index==this.state.currentPage) ? {color:'orange'} :{color:'white'}
allCircle.push(
// • 为圆点
<Text key={index} style={[{fontSize:25},style]}>•</Text>
);
}
return allCircle;
}
// 定时器函数
startTimer(){
//拿到ScrollView控件
var ScrollView = this.refs.ScrollView;
// 图片的资源的个数
var Imagscount = ImageData.data.length;
this.timer = setInterval(() => {
// 获取当前为第几页
var currentPage = this.state.currentPage;
// 下一页的页数
var activePage=0;
// 如果下一页为尾页，将下一页设为首页
if((currentPage+1) >= Imagscount){
activePage = 0;
}else{
activePage = currentPage+1;
}
// 将值设置回去以便出发Diff算法，最终出发render函数 以便重新刷新页面
this.setState({
currentPage:activePage
});
// 通过页数计算应该展示什么位置的图案
var offsetX = activePage * width;
ScrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});
},this.props.duration);
}
componentWillUnmount() {
// 如果存在this.timer，则使用clearTimeout清空。
// 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
this.timer && clearTimeout(this.timer);
}
}
// imageLunBo.propTypes={
// //属性校验期，表示改属性必须是bool，否则报错
// duration:React.PropTypes.bool
// };
// ES6中设置默认值的写法
imageLunBo.defaultProps={//设置默认属性
duration:1000
};
