ReactNative基础（三）了解ScrollView并打造一个Banner效果
2024-04-18 14:11:36
此博客基于react-native-0.48.4
ScrollView简介
- 一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。
- 这个就跟Android中的ScrollView总体来说是一样的，将会超出屏幕的视图使用ScrollView包裹来滑动查看。
- ScrollView文档属性介绍
来编写个案例实现下
新创建个
ScrollTest.js组件，然后在index.android.js中引入这个组件
index.android.js
var Scroll = require('./src/scrollTest');export default class UseScrollView extends Component {render() {return (<View style={{flex: 1}}><Scroll/></View>);}
}AppRegistry.registerComponent('UseScrollView', () => UseScrollView);在组件中创建5个视图让内容超出屏幕，这样使用ScrollView就可以清楚的看到效果
//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度和高度
var {width} = dimensions.get('window');class ScrollTest extends Component {render() {return (<ScrollView>{this.getView()}</ScrollView>);}getView() {var all = [];var colors = ['red', 'blue', 'green', 'black', 'gray'];for (var i = 0; i < colors.length; i++) {//往数组添加元素all.push(//往数组添加元素一定要加一个唯一标识<View key={i} style={{justifyContent: 'center',alignItems: 'center',backgroundColor: colors[i],width: width,height: 180}}><Text style={{color: 'white'}}>第{i + 1}个文本</Text></View>);}//返回数据return all;}
}module.exports = ScrollTest;效果图：
使用呢也是超级的简单，将需要滑动的内容包裹即可。
了解ScrollView常用的一些属性
- horizontal bool 当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
- showsHorizontalScrollIndicator bool 当此属性为true的时候，显示一个水平方向的滚动条。
- showsVerticalScrollIndicator bool 当此属性为true的时候，显示一个垂直方向的滚动条。
- pagingEnabled bool 当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
- scrollEnabled bool 当值为false的时候，内容不能滚动，默认值为true。
- onMomentumScrollEnd?: function 滚动动画结束时调用此函数。
- 更多属性和方法介绍可以看这里ScrollView
将ScrollView设置为水平滚动，来查看下效果：
好了，基本使用也就这些了；接下来使用ScrollView实现一个自动轮播的Banner。
使用ScrollView打造一个轮播图，创建一个banner.js组建来码代码。
先来欣赏一下效果图这样才有看下去的动力，是吧！
第一步：定义好我们的图片资源，创建一个水平的ScrollView并循环往里面添加需要展示的图片
var banner = ['http://oweq6in8r.bkt.clouddn.com/about.jpg','http://oweq6in8r.bkt.clouddn.com/liuliangqiu.jpg','http://oweq6in8r.bkt.clouddn.com/rn.jpeg','http://image.baidu.com/search/地址太长/%3D0.jpg'
];
//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度和高度
var {width} = dimensions.get('window');class Banner extends Component {render() {return (<View style={styles.container}><ScrollViewhorizontal={true}showsHorizontalScrollIndicator={false}pagingEnabled={true}>{/*显示轮播图的图片内容*/}{this.getImages()}</ScrollView></View>);}//获取轮播图显示的图片getImages() {var images = [];for (var i = 0; i < banner.length; i++) {images.push(<View key={i}>{/*将图片的宽度设置为屏幕宽度*/}{<Image source={{uri: banner[i]}} style={styles.image}/>}</View>);}return images;}}const styles = StyleSheet.create({container: {marginTop: 8,},image: {width: width,height: 240,}
});module.exports = Banner;- 一个可以横向滑动的Viewpager效果就出来了
- 接下来就需要添加我们底部的页面指示器了，与添加图片方式一致for循环添加。
第二步：添加底部的页面指示器，在render()函数中添加代码就不贴出所有了，避免篇幅太长。
<ScrollView>...
</ScrollView>
{/*生成底部的圆点指示器*/}
<View style={styles.indicator}>{this.getIndicators()}
</View>//获取左下角的4个圆点
getIndicators() {var circles = [];for (var i = 0; i < banner.length; i++) {circles.push(<Text key={i}style={styles.unselected}>•</Text>//• html转义字符圆点);}return circles;
}//底部指示器的样式
indicator: {width: width,height: 40,position: 'absolute',bottom: 0,//放置在底部backgroundColor: 'rgba(0,0,0,0.5)',flexDirection: 'row',alignItems: 'center',
},
unselected: {marginLeft: 10,fontSize: 40,//也就是圆点的大小color: 'white'
}底部指示器效果：
第三步：当我们左右滑动的时候我们需要来改变底部指示器圆点的颜色
- 我们需要一个变量来保存当前滑动到了哪一个页面，我们可以定义一个var position
constructor(props) {super(props);this.state = {//当前显示的下标position: 0,}
}- 现在我们来修改ScrollView，添加一个页面滑动监听
<ScrollView//滚动动画结束时调用此函数。一帧滚动结束onMomentumScrollEnd={(v) => this.onAnimationEnd(v)}>...
</ScrollView>//v 则为scrollView对象
onAnimationEnd(v) {//1.求出水平方向的偏移量var offsetX = v.nativeEvent.contentOffset.x;//2.根据偏移量求出当前的页数 width为图片的宽度（banner的宽度 ）var position = Math.round(offsetX / width);//3.更新状态机, 刷新圆点this.setState({position: position});
}- 通过监听函数，我们获取到了用户当前滑动到了哪一个页面；那么现在我们就需要动态修改指示器圆点对应的颜色。（如果没有阅读过这篇ReactNative基础（二）了解组件的生命周期，可以先看完再回过头来看这篇）
- 现在我们只需要修改上面已经定义好的
getIndicators()函数即可
//在循环创建圆点时判断添加的点是不是当前显示的页面，如果是的话则用选中的样式
getIndicators() {var circles = [];for (var i = 0; i < banner.length; i++) {circles.push(<Text key={i}style={i === this.state.position ? styles.selected : styles.unselected}>•</Text>);}return circles;
}
selected: {marginLeft: 10,fontSize: 40,color: '#5CB85C'
},欣赏下成果：
到这里基本上一个可以手动滑动的ViewPager效果就做好了是不是very exciting，为了让我们的ViewPager更加高大上我们添加个定时器，让它自动轮播。
- 我们先来定义轮播的间隔时间
static defaultProps = {//间隔时间 1000msduration: 1000
};- 当组件完全渲染完成之后，开启我们的定时器。
//绘制完成，开启定时器
componentDidMount() {this.startTimer();
}
//开启定时器，并每隔1sposition从0～3循环
startTimer() {//1.拿到ScrollViewvar scrollView = this.refs.scrollView;this.timer = setInterval(() => {//设置圆点的下标var curr = this.state.position;if (curr + 1 > banner.length - 1) {curr = 0;} else {curr++;}//更新状态机，更新当前下标this.setState({position: curr,});//滚动ScrollView，1.求出水平方向的平移量 offsetX = curr * widthscrollView.scrollTo({x: curr * width, y: 0, animated: true})}, this.props.duration);
}
var scrollView = this.refs.scrollView;这行代码就有点类似Android中的findViewById()来获取视图中的某个View，所以我们需要在ScrollView中添加一个属性，如下：
<ScrollViewref="scrollView">//...
</ScrollView>- 最最最后一步，当我们手动滑动轮播图的时候需要取消掉计时器、滑动结束之后恢复循环。
<ScrollViewref="scrollView"//手指按下的时候，停止计时器onTouchStart={() => clearInterval(this.timer)}>
</ScrollView>手指抬起的时候也就是，我们滑动一页完毕之后的事件；也就是我们上面使用到的一个函数onAnimationEnd()那么我们只需要在函数的末尾继续调用我们的开启计时器函数即可。
onAnimationEnd(v) {//...this.startTimer();
}好了一个美妙的轮播图效果就完成了；不负春光，野蛮生长。
源码下载地址
推荐阅读：
- ReactNative基础（一）编写一个登录页面
- ReactNative基础（二）了解组件的生命周期
ReactNative基础（三）了解ScrollView并打造一个Banner效果相关推荐
- android 复用标题栏,Android基础---使用ToolBar教你打造一个通用的标题栏
现在项目中一般都会使用标题栏,谷歌在2014年推出了新的app bar---ToolBar,代替了以前使用的ActionBar.在做项目中会经常用到这个ToolBar,虽然用的很多,但是自己对它如何用 ...
- html图片怎么加动画效果,css打造一个动画效果的图片墙
今天我们将开始建立另一个有趣的CSS演示.这次我们将创建一个大的.无缝的照片墙.当用户将鼠标悬停于一个图像,一个透明的黑色渐变效果覆盖在其上面. Demo:点击这里 HTML代码 第一步我们需要创建一 ...
- android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View
大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想 ,所以革命没成功,同志仍需努力. 好了废话不 ...
- android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View(示例代码)...
大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想 ,所以革命没成功,同志仍需努力. 好了废话不 ...
- Silverlight动画基础三：动画与向量-模拟重力效果
这次将使用向量和动画结合来模拟物体在具有重力下的运动效果,主要逻辑: 1.定义小球的重力,摩擦力.以及运动速度的递减变量 2.根据鼠标拖拽小球的前后位置的差值来设置小球的起始速度,拖动越快速度也就越大 ...
- ReactNative基础（四）了解ListView的使用、实现GridView效果、编写一个真实网络请求案例
此博客基于react-native-0.48.4 ListView简介 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource ...
- 零基础快速打造一个属于自己的微信聊天工具
" 零基础快速打造一个属于自己的微信聊天工具" 打开微信,我们可以和别人进行聊天,发送消息.非常方便,那微信是怎么来的呢?这个本质的问题让人突发奇想,我们能不能做一个属于自己的微 ...
- 两分钟打造一个转属于你的网址导航（零基础，告别广告困扰）
当我们打开浏览器时,总会会被默认网址导航所困扰,网址导航页没有自己常用的网址,时不时会弹出来烦人的广告,等等等困扰我们的问题,花费两分钟的时间,看完这篇文章之后,打造一个专属于你的网址导航,从此告别一 ...
- AI公开课：19.04.17杨松帆—好未来AI Lab负责人《为人工智能时代打造一个AI老师》课堂笔记以及个人感悟
AI公开课:19.04.17杨松帆-好未来AI Lab负责人<为人工智能时代打造一个AI老师>课堂笔记以及个人感悟 导读 杨松帆,现为好未来教育集团人工智能实验室负责人.曾任FaceThi ...
最新文章
- CodeSmith生成SQL Server视图的实体类脚本/对应的生成模板
- linux cant open file for writing,linux 安装rz sz lrz lsz sftp: cannot open 文件名称 to write 报错解决...
- 苹果电脑怎么投屏到电视_tcl电视怎么投屏
- 在Visual Studio Code中配置GO开发环境
- Java笔记-C3P0连接池中常用的3个配置
- android的控件常用方法是,Android常用控件属性分析
- Java 面向对象 之 封装方法
- Tensorflow：模型保存和服务
- Vue中mintui的field组件的blur和focus事件
- 凸优化第二章凸集 2.5分离与支撑超平面
- 几步看懂晶闸管的结构和工作原理
- imagej得到灰度图数据_imageJ 使用教程之样本长度测量
- 利用华为手机给台式机提供网络
- ldconfig是个什么东东
- 随便画一张，奥古斯丁的世界观 及 lambda
- php 分页类 bootstrap,Thinkphp自带分页类样式转Bootstrap分页样式
- H3C设备网吧万兆光模块解决方案
- php 多核cpu,如何利用多核CPU来加速你的Linux命令
- SAP Commerce Cloud 的 Simple Responsive Banner Component
- 树莓派小爱同学、天猫精灵、智能音箱、百度语音极速版、百度语音标准版、语音识别、语音合成终极方案