React Native 基础组件之 ScrollView
2019-02-27 本文已影响0人
Kevin_小飞象
一个封装了平台的 ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。
记住 ScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置 flex: 1 以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。
ScrollView 内部的其他响应者尚无法阻止 ScrollView 本身成为响应者。
属性
| name | type | desc |
|---|---|---|
| alwaysBounceVertical | bool | 当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。(ios) |
| contentContainerStyle | StyleSheetPropType(View Style props) | 样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。 |
| keyboardShouldPersistTaps | enum('always', 'never', 'handled', false, true) | 如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置。 |
| onContentSizeChange | function | 此方法是通过绑定在内容容器上的onLayout来实现的。 |
| onScroll | function | 在滚动的过程中，每帧最多调用一次此回调函数。 |
| pagingEnabled | bool | 当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。 |
| refreshControl | element | 指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。只能用于垂直视图，即horizontal不能为true。 |
| removeClippedSubviews | bool | 当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。 |
| scrollEnabled | bool | 当值为false的时候，内容不能滚动，默认值为true。 |
| showsHorizontalScrollIndicator | bool | 当此属性为true的时候，显示一个水平方向的滚动条。 |
| showsVerticalScrollIndicator | bool | 当此属性为true的时候，显示一个垂直方向的滚动条。 |
Style
| name | type | desc |
|---|---|---|
| backfaceVisibility | [‘visible’, ‘hidden’] | 隐藏或者显示 |
| backgroundColor | color | 背景色 |
| borderBottomLeftRadius | number | 左下角圆角大小 |
| borderBottomRightRadius | number | 右下角圆角大小 |
| borderColor | color | 边框颜色 |
| borderRadius | number | 边框圆角 |
| borderTopLeftRadius | number | 左上角圆角大小 |
| borderTopRightRadius | number | 右下角圆角大小 |
| borderWidth | number | 边框宽度 |
| opacity | [0.0-1.0] | 设置透明度 |
| overflow | [‘visible’, ‘hidden’] | 设置图片尺寸超过容器可以设置显示或者隐藏 |
| androidelevation | number | android5.0以上有的，立体阴影效果 |
方法
scrollTo()
scrollTo(
([y]: number),
object,
([x]: number),
([animated]: boolean),
([duration]: number),
);
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。还有一个duration参数则是仅限android可以使用的滚动持续时间。
示例：
scrollTo({x: 0, y: 0, animated: true})
指定滚动持续时间的示例(仅限Android):
scrollTo({x: 0, y: 0, duration: 500})
scrollToEnd()
scrollToEnd(([options]: {animated: boolean, duration: number}));
滚动到视图底部（水平方向的视图则滚动到最右边）。
加上动画参数 scrollToEnd({animated: true}) 则启用平滑滚动动画，或是调用scrollToEnd({animated: false}) 来立即跳转。
实例
代码:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TouchableOpacity,
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
空间动态
</Text>
</View>
<ScrollView ref={(scrollView) => { _scrollView = scrollView; }}>
<View style={styles.three_image_view}>
<View style={styles.vertical_view}>
<Image source={require('./img/cat.png')} style={styles.topImg} />
<Text style={styles.top_text}>
好友动态
</Text>
</View>
<View style={styles.vertical_view}>
<Image source={require('./img/cat.png')} style={styles.topImg}/>
<Text style={styles.top_text}>
附近
</Text>
</View>
<View style={styles.vertical_view}>
<Image source={require('./img/cat.png')} style={styles.topImg}/>
<Text style={styles.top_text} >
兴趣部落
</Text>
</View>
</View>
<View style={styles.devices}/>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
游戏
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
好友微视
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
京东购物
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
企鹅电竞
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
直播
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
波洞星球
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
阅读
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
音乐
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
鹅漫U品
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.devices}/>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
运动
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
吃喝玩乐
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
<View style={styles.rectangle_view}>
<View style={styles.itemContainer}>
<Image source={require('./img/cat.png')} style={styles.itemImg}/>
<Text style={styles.rectangle_text} >
同城服务
</Text>
</View>
<Image source={require('./img/ppe.png')} style={styles.arrowImg}/>
</View>
</ScrollView>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.scrollTo({y: 0}); }}>
<Text style = {styles.btnText}>回到顶部</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:20,
textAlign:'center'
},
three_image_view:{
paddingTop: 15,
flexDirection:'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor:'white',
},
vertical_view:{
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white',
paddingBottom:15,
},
top_text:{
marginTop:5,
color:'black',
fontSize:16,
textAlign:'center'
},
rectangle_view:{
paddingTop:8,
paddingBottom:8,
paddingLeft:15,
paddingRight:15,
flexDirection:'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor:'white',
borderBottomColor:'#dedfe0',
borderBottomWidth:1,
},
rectangle_text:{
color:'black',
fontSize:16,
textAlign:'center',
paddingLeft:8,
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: 'red',
borderRadius: 3,
},
topImg: {
alignSelf:'center',
width:45,
height:45
},
itemImg: {
alignSelf:'center',
width:30,
height:30
},
arrowImg: {
alignSelf:'center',
width:20,
height:20
},
itemContainer: {
flexDirection:'row',
alignItems: 'center'
},
devices :{
height:30,
backgroundColor:'#f9f9fb'
},
btnText : {
color:'white',
fontSize: 16
}
});
效果图：
demo.jpg
