ReactNative中ScrollView组件

关于ScrollView

ScrollView是一个通用的可滚动的控件，可以放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动
一般使用ScrollView满足俩点即可
- ScrollView必须有一个确定的高度才能正常工作
  将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）
  通常有两种做法：
  1、直接给该ScrollView进行设置高度(不建议)；
  2、 ScrollView中不要加{flex:1}。
- 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的时候，显示一个垂直方向的滚动条。

扫描二维码关注公众号，回复： 1768922 查看本文章
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',
    },
});

ReactNative中ScrollView组件

关于ScrollView

常用属性

猜你喜欢