关于ScrollView
- ScrollView是一个通用的可滚动的控件,可以放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动
- 一般使用ScrollView满足俩点即可
- ScrollView必须有一个确定的高度才能正常工作
将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)
通常有两种做法:
1、 直接给该ScrollView进行设置高度(不建议);
2、 ScrollView中不要加{flex:1}。 - ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者
- ScrollView必须有一个确定的高度才能正常工作
常用属性
- contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。 horizontal bool
当此属性为true的时候,所有的的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值为false。keyboardDismissMode enum(‘none’, “interactive”, ‘on-drag’)
用户拖拽滚动视图的时候,是否要隐藏软键盘。none(默认值),拖拽时不隐藏软键盘。
on-drag 当拖拽开始的时候隐藏软键盘。
interactive 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项,会表现的和none一样。
keyboardShouldPersistTaps bool
当此属性为false的时候,在软键盘激活之后,点击焦点文本输入框以外的地方,键盘就会隐藏。如果为true,滚动视图不会响应点击操作,并且键盘不会自动消失。默认值为false。onScroll function
在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。refreshControl element
指定RefreshControl组件,用于为ScrollView提供下拉刷新功能。removeClippedSubviews bool
(实验特性):当此属性为true时,屏幕之外的子视图(子视图的overflow样式需要设为hidden)会被移除。这个可以提升大列表的滚动性能。默认值为true。showsHorizontalScrollIndicator bool
当此属性为true的时候,显示一个水平方向的滚动条。showsVerticalScrollIndicator bool
当此属性为true的时候,显示一个垂直方向的滚动条。alwaysBounceHorizontal bool
当此属性为true时,水平方向即使内容比滚动视图本身还要小,也可以弹性地拉动一截。当horizontal={true}时默认值为true,否则为false。- OnMomentumScrollEnd function
当一帧滚动完毕的时候调用,e.nativeEvent.contentOffset。 - onScrollBeginDrag fuction
当开始手动拖拽的时候调用。 - onScrollEndDrag fuction
当结束手动拖拽的时候调用。
注意:ScrollView是继承自View,所以View中所有的属性同样适用于ScrollView。
export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator = {false}
pagingEnabled = {true}>
{this.setUP()}
</ScrollView>
</View>
);
}s
setUP(){
var viewArr = [];
var colorArr = ['red','green','blue','yellow','purple'];
for (let i = 0; i < 5; i++) {
viewArr.push(
<View key = {i} style = {{backgroundColor:colorArr[i],width:375,height:150}}>
<Text>{i}</Text>
</View>
)
}
return viewArr;
}
};
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'white',
},
});