react native ScrollView 自定义控件 Ba
2017-12-12 本文已影响0人
苍天霸气诀
1、ScrollView介绍（官方解释）：
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。
2、ScrollView常用属性：
horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
showsHorizontalScrollIndicator（布尔值）：当此属性为true的时候，显示一个水平方向的滚动条。
showsVerticalScrollIndicator（布尔值）：与showsHorizontalScrollIndicator相对，当此属性为true的时候，显示一个垂直方向的滚动条。
OnMomentumScrollEnd（function） ：当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset，可以用来获取偏移量。
onScrollBeginDrag（function） ：当开始手动拖拽的时候调用。
onScrollEndDrag（function） ：当结束手动拖拽的时候调用。
onScroll（function） ：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
*注意：ScrollView是继承自View，所以View中所有的属性同样适用于ScrollView。在此只介绍几个常见的android和ios通用属性。更多详细属性请移步到此处
例子：纵向滑动
export default class App extends Component<{}> {
render() {
const screenWidth = Dimensions.get('window').width;
return (
<View style={styles.container}>
<View>
<Text
style={styles.welcome}
>
头部
</Text>
</View>
<ScrollView
ref="scrollView"
horizontal={false}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
<Text
style={styles.welcome}
>
ScrollView 纵向滑动
</Text>
<Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg"}}
style={{width:screenWidth,height:240}}></Image>
<Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg"}}
style={{width:screenWidth,height:240}}></Image>
<Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg"}}
style={{width:screenWidth,height:240}}></Image>
</ScrollView>
</View>
);
}
}
纵向滑动.png
例子：横向 （自定义ScrollView）
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;
class MyScrollViewTwo extends Component{
renderChilds= () =>{
var imgeList=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg'
,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg'
,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg'
];
return imgeList.map((item,i)=>{
return<Image key ={`item${i}`} source={{uri:item}}
style={{width:ScreenWidth,height:240}}></Image>
});
}
render(){
return <ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
{this.renderChilds()}
</ScrollView>;
}
}
module.exports = MyScrollViewTwo;
横向滑动.png
例子自定义Banner
/**
* Created by Android on 2017/12/12.
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;
var imgeList=require('./jsons.json');
class Banner extends Component{
constructor(props){
super(props);
this.state={
currentPage:0
};
}
// 渲染图片
renderChilds= () =>{
return imgeList.data.map((item,i)=>{
return<Image key ={`item${i}`} source={{uri:item.img}}
style={{width:ScreenWidth,height:240}}></Image>
});
}
/**
* 渲染圆
*/
renderCircles=()=>{
return imgeList.data.map((item ,i)=>{
var style = {};
//当前页面的的指示器，橘黄色
if(i === this.state.currentPage){
style = {color:'orange'};
}
return <Text key={`text${i}`} style={[styles.circleStyle,style]}>•</Text>
});
}
handleScroll = (e)=>{
var x = e.nativeEvent.contentOffset.x;
var currentPage = Math.floor(e.nativeEvent.contentOffset.x / ScreenWidth);
this.setState({currentPage:currentPage});
console.log("currentPage:"+currentPage);
}
//定时器
startTimer = ()=>{
this.timer = setInterval(()=>{
//计算出要滚动到的页面索引，改变state
var currentPage = ++this.state.currentPage == imgeList.data.length ? 0 : this.state.currentPage;
this.setState({currentPage:currentPage});
//计算滚动的距离
var offsetX = currentPage * ScreenWidth;
this.refs.scrollView.scrollTo({x:offsetX,y:0,animated:true});
console.log(currentPage);
},2000);
}
//开始滑动
handleScrollBegin = ()=>{
console.log("handleScrollBegin");
clearInterval(this.timer);
}
handleScrollEnd = ()=>{
console.log("handleScrollEnd");
this.startTimer();
}
render(){
return <View style={styles.flexDirection}>
{/*
return 后面不能回车
*/}
<ScrollView
ref="scrollView"
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
onMomentumScrollBegin={this.handleScroll}
onScrollBeginDrag={this.handleScrollBegin}
onScrollEndDrag={this.handleScrollEnd}
>
{this.renderChilds()}
</ScrollView>
<View style={styles.circleWrapperStyle}>
{this.renderCircles()}
</View>
</View>;
}
//定时器 生命周期
componentDidMount = ()=>{
this.startTimer();
}
//取消定时器
componentWillUnmount =() => {
clearInterval(this.timer);
}
}
var styles =StyleSheet.create({
container: {
flexDirection:'column'
},
circleWrapperStyle:{
flexDirection:'row',
//absolute“绝对”定位，参照标准父容器
//relative “相对”对位，相对于原来的位置
position:'absolute',
bottom:0,
left:10
},
circleStyle:{
fontSize:25,
color:'#FFF'
}
});
module.exports = Banner;
return 后面不能回车
banner.png
jsons.json
{
"data": [
{
"img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg",
"title" : "你那一笑倾国倾城"
},
{
"img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg",
"title" : "那里记录了最唯美的爱情故事"
},
{
"img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg",
"title" : "我怎么是一个剩女"
}
]
}
