ReactNative学习笔记--ScrollView的深入使用

ReactNative学习笔记--ScrollView的深入使用

只有在使用中才会知道有多少坑等着你，现在总结下最近遇到的有关ScrollView的使用的知识点。

1.ScrollView的样式

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
虽然是ScrollView的基本样式，但是很实用，这个样式是设定ScrollView内容视图（ContentView）的样式ooo

相关的设置如下

<ScrollView contentContainerStyle={{height:140,width:240,justifyContent:'center',paddingHorizontal:16}}
          >
              {items.map((item,i)=>{
                  return(
                                        )
              })}
</ScrollView>

2.ScrollView的动态高度

在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。这个方法最常用于逐帧的获得ScrollView的偏移量，来实现某些特效，例如界面的某个组件的高度动态变化。此方法调用的频率可以用scrollEventThrottle属性来控制，
当scrollEventThrottle属性值设置比较低时，对位置比较敏感，会多次触发onScroll，该属性默认为0。这里设为1，调用_onScroll的频率就足够高了

<ScrollView
                onScroll={this._onScroll}
                scrollEventThrottle={1}
            >
</ScrollView>

下面的代码获取ScrollView的偏移量obj.nativeEvent.contentOffset.y
然后通过this.header（自定义的组件）调用组件自己的uploadUIwithContentOffSetY方法，实现动态高度，协调ScrollView的偏移量

 _onScroll = (obj)=>{
        this.header.uploadUIwithContentOffSetY(obj.nativeEvent.contentOffset.y);
    };

3.ScrollView scrollTo

滚动到指定的距离，

<ScrollView
                    ref={ref=>{this.scrollView=ref}}
                    style={{width:Const.screen_width-60-32}}
                    horizontal={true}
                >
   {items}
</ScrollView>

点击按钮，滚动到指定的位置 实现水平选择样式

this.scrollView.scrollTo({x:(Const.screen_width-60-32)/4.0,y:0,animated:true})

未完待续