React Native 之 ScrollView的翻到顶部功能

先说明一下使用背景吧==>用ScrollView写的一个页面,页面底部有一个下一篇按钮,但是点击按钮重新render之后,页面依旧在底部,没有自动跳到顶部,视觉效果很差

解决的方法是在ScrollView的标签中加入相当于类名的属性

  <ScrollView ref = 'totop' >            <View style ={styles.container} >              <View style ={styles.top} >< Text style ={{ color :  '#1eaaca' }} >{this.state.ClassTitle} </ Text ></View >              <View >< Text style ={{ fontSize :  20, lineHeight :  60, }} >{this.state.title} </ Text ></View > <TouchableHighlight onPress ={()  => {                     this. getPrevious()                   }} >                      <View >                        <View style ={styles.iconboder} >                          <View style ={styles.border} ></View >                        </View >                        < Text >上一篇 </ Text >                      </View >                    </TouchableHighlight > </ScrollView>

其中的ref='totop',==>ref相当于锚点的id属性,'totop'是随意的命名,相当于类名

在调用这个方法的组件中这样书写

<TouchableHighlight onPress ={()  => {                     this. getPrevious()//点击调用的方法                   }} >                      <View >                        <View style ={styles.iconboder} >                          <View style ={styles.border} ></View >                        </View >                        < Text >上一篇 </ Text >                      </View >                    </TouchableHighlight >

在点击调用的方法getPrevious()中

getPrevious(){

  //这里是控制页面的初始位置的方法,相当于html中利用id的锚点连接方法, totop相当于类名,组件的ref相当于锚点id,refs指同一类方法.     this.refs.totop. scrollTo({x : 0,y :  0,animated : true}); 需要三个参数,x轴的起始点,y轴的起始点.anmated是指是否有动画效果

}

项目中的整体方法比较复杂,这里简单把功能写出来了,大家参考下.

简单理解就是ref的一些属性控制的,大家可以看一下ref的详解.