(一)前言 今天我们一起来看一下滚动视图ScrollView组件的介绍和使用讲解。 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该组件封装了Android平台的ScrollView(滚动视图)组件,并且提供触摸事件"responder"系统功能。使用ScrollViews的时候我们必须要去确保该有一个固定的高度,因为该其实就是包含很多不固定高度的字控件装入到固定的容器中(通过滑动交互)。如果我们要给ScrollView进行设置高度的话,要么我们直接给该ScrollView进行设置高度(注意该方法不建议哦)。另外一种方法是就是该ScrollView的父控件设置相关高度。使用第二种方法视图任意位置中是不能忘记加{flex:1},不然不会有效果的。 (二)官方实例 首先我们来看一下官方的实例代码,不过该代码整体封装性比较强,可能对于初学者来说初看起来还是有点问题的,不过后面我会写一个例子的,具体代码如下:
运行效果如下图: (三)属性方法(这边只关注通用以及Android平台的) 3.1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式) 3.2.contentContainerStyle 样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。实例如下: 3.3.horizontal 表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动 3.4.keyboardDismissMode 枚举类型表示键盘隐藏类型,可选值('none', "interactive", 'on-drag') 三个值的意义分别如下:
3.5.keyboardShouldPersistTaps 该属性默认为false,表示如果当前是textinput控件,并且键盘是弹出状态的话,点击textinput之外地方,会进行隐藏键盘。反之不会有效果,键盘还是成打开状态。 3.6.onContentSizeChange function 该当滚动视图的内容尺寸大小发生变化的时候进行调用 3.7.onScroll function 该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。 3.8.refreshControl element 设置元素控件,该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能. 3.9.removeClippedSubviews 测试属性 当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除,该设置可以提高滚动的性能。 3.10.showsHorizontalScrollIndicator 该值设置是否需要显示横向滚动指示条 3.11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条 3.12.sendMomentumEvents 当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置,该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来,然后之前设置的方法进行捕捉。 接下来的其他属性方法都只适合于iOS平台,这边暂时不做相关讲解。具体请点击查看官方文档 (四)风格样式 对于风格样式这块,其实和View视图中差不多的,大家可以点击进行查看View组件的介绍和详解文章
(五)使用实例 以上我们对于ScrollView的介绍以及相关属性方法以及样式做了一定的介绍,下面我们来写一个比较简单的实例,来演示一下该ScrollView控件的基本使用。实例代码如下:
运行效果如下: (六)最后总结 今天我们主要学习一下ScrollView组件的介绍以及使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。 尊重原创,转载请注明:From Sky丶清(http://www./) 侵权必究! 关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章) 关注我的微博,可以获得更多精彩内容
|
|