Reac-Native ScrollView回到顶部

ScrollView 是一个滚动控件，当内容显示不全时可以通过滚动显示。

属性：

View props… :View的所有属性 
contentContainerStyle：内容容器的样式，所有的子视图都会包裹在内容容器内。 
horizontal：为true时，横向滚动 
keyboardDismissMode ：用户拖拽滚动视图的时候，是否要隐藏软键盘。

none（默认值）:拖拽时不隐藏软键盘。 
on-drag :当拖拽开始的时候隐藏软键盘。 
interactive: 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上 不支持这个选项，会表现的和none一样。

keyboardShouldPersistTaps: 如果当前界面有软键盘，那么点击scrollview后是否收起键盘

never（默认值）:点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。 
always:键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。 
handled:当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。 
false:已过期，请使用’never’代替。 
true:已过期，请使用’always’代替。

onContentSizeChange:ScrollView内部可滚动内容的视图发生变化时调用,参数为内容视图的宽和高 
onScroll:滚动的过程中，每帧最多调用一次此回调函数 
refreshControl:可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能. 
showsHorizontalScrollIndicator:显示水平滚动条 
showsVerticalScrollIndicator：显示垂直滚动条 
style:样式属性

Flexbox… 
ShadowProp#style… 
Transforms… 
backfaceVisibility enum(‘visible’, ‘hidden’) 
backgroundColor string 
borderColor string 
borderTopColor string 
borderRightColor string 
borderBottomColor string 
borderLeftColor string 
borderRadius number 
borderTopLeftRadius number 
borderTopRightRadius number 
borderBottomLeftRadius number 
borderBottomRightRadius number 
borderStyle enum(‘solid’, ‘dotted’, ‘dashed’) 
borderWidth number 
borderTopWidth number 
borderRightWidth number 
borderBottomWidth number 
borderLeftWidth number 
opacity number 
overflow enum(‘visible’, ‘hidden’) 
shadowColor string 
shadowOffset {width: number, height: number} 
shadowOpacity number 
shadowRadius number

pagingEnabled:当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。比如我们滚动到多余半个屏幕的时候松手，控件会自动滚到下一页的位置。 
scrollEnabled:是否可以滚动 
scrollTo : (y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) 
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。 
scrollToEnd: 滚动到视图底部（水平方向的视图则滚动到最右边）scrollToEnd({animated: true})则启用平滑滚动动画

Demo

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    TextInput,
    ToastAndroid,
    Button,
} from 'react-native';


export default class ScrollViewDemo extends Component {

    state = {
        data:['第1个', '第2个', '第3个', '第4个', '第5个', '第6个', '第7个', '第8个', '第9个', '第10个'],
    }

    _scroll;

    render() {
        return (
            <View style={{flex:1}}>
                <Button title='切换数据' onPress={()=>{
                    this.setState({
                        data:['第11个', '第12个', '第13个', '第14个', '第15个', '第16个', '第17个', '第18个', '第19个', '第20个','第21个'],
                    });
                }}></Button>
                <Button  title='滚动到y：100的位置' onPress={()=>{
                    this._scroll.scrollTo({y:100});
                }}/>
                <Button  title='滚动到末尾' onPress={()=>{
                    this._scroll.scrollToEnd();
                }}/>
                <ScrollView
                    ref={(scroll)=>this._scroll = scroll}
                    style={{borderColor:'red',borderWidth:2}}
                    contentContainerStyle={{paddingLeft:20,paddingTop:20,paddingRight:20}}
                    keyboardDismissMode='on-drag'
                    keyboardShouldPersistTaps='never'
                    showsVerticalScrollIndicator={true}
                    scrollEnabled={true}
                    pagingEnabled={true}
                    horizontal={false}
                    onContentSizeChange={(contentWidth, contentHeight)=>{
                        var msg = 'onContentSizeChange:'+contentWidth+','+contentHeight;
                        ToastAndroid.show(msg,ToastAndroid.SHORT);
                    }}
                onScroll={(e)=>{
                    console.warn('onScroll');
                }}>
                    <Text style={{height:50,backgroundColor:'black',color:'white'}}>悬浮在顶部</Text>
                    <TextInput />

                    {
                        this.state.data.map((item, index) => {
                            var color = index * 23 + 10;
                            return <Text style={[styles.text,{backgroundColor:color}]}>{item}</Text>
                        })
                    }
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        height: 200,
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'red',
        fontSize: 30
    }
})
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

效果图

github下载地址

/

页面中有个ScrollView,点击某个Button，跳到ScrollView的顶部。

可以参考以下例子:

<ScrollView  ref={component => this._scrollView = component}  />

 //this._scrollView.scrollTo(0, 0);  这个有动画效果

 

 this._scrollView.scrollWithoutAnimationTo(0,0);    //这个没有动画效果

React Native 之 ScrollView的翻到顶部功能

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

解决的方法是在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的详解.