ScrollView 简单使用

简单介绍一下ScrollView返回到顶部和需要定位到某个模块到顶部展示。

 类似于这个页面，点击西亚需要把西亚的页面展示到顶部，或者点击撸撸展示撸撸到顶部，点击右下角图标返回到德玛这一部分，简单实现一下。

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TextInput, TouchableOpacity, StatusBar } from 'react-native';

export default class lianxi1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabArr: ["德玛", "西亚", "撸撸"],// tab数组
            tabIndex:0,
            viewY1:0,
            viewY2:0
        }
    }
    componentWillMount() {

    }
    render() {
        const { goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <View style={styles.detailsTab}>
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.dsTaberror}
                    onPress={() => { goBack() }}
                >
                    <Image source={require("../images/back.png")} />
                </TouchableOpacity>
                <View style={styles.dsTabcenter}>
                {this.state.tabArr && this.state.tabArr.map((item, index) => {
                    return (
                        <TouchableOpacity
                            key={index}
                            activeOpacity={0.8}
                            //设置点击的标题颜色
                            style={[styles.tabItemClick, this.state.tabIndex == index ? { borderBottomColor: Colors.red } : null]}
                            key={index}
                            onPress={() => {
                                switch (index) {
                                    //点击展示对应的模块
                                    case 0:
                                        this.setState({
                                            tabIndex: index,
                                        })
                                        //设置展示对应模块
                                        this._scroll.scrollTo({ x: 0, y: 0, animated: true })
                                        break;
                                    case 1:
                                        this.setState({
                                            tabIndex: index,
                                        })
                                        this._scroll.scrollTo({ x: 0, y: this.state.viewY1, animated: true })
                                        break;
                                    case 2:
                                        this.setState({
                                            tabIndex: index,
                                        })
                                        this._scroll.scrollTo({ x: 0, y: this.state.viewY2, animated: true })
                                        break;
                                    default:
                                        this._scroll.scrollTo({ x: 0, y: 0, animated: true })
                                        break;
                                }
                            }}
                        >
                            <Text style={[styles.tabItemText, this.state.tabIndex == index ? { color: Colors.red } : null]}>
                                {item}
                            </Text>
                        </TouchableOpacity>
                    )
                })}
            </View></View>
                <ScrollView
                    ref={(ref) => this._scroll = ref}
                >

                    <View style={{height:Px2dp(400),width:SCREEN_WIDTH,backgroundColor:'#bbcc00'}}/>

                    <View
                        //设置对应模块的高度位置
                        onLayout={(e) => {
                            this.setState({
                                viewY1: e.nativeEvent.layout.y,
                            })
                        }}
                        style={{height:Px2dp(400),width:SCREEN_WIDTH,backgroundColor:'#aabbee'}}/>


                    <View
                        onLayout={(e) => {
                            //设置对应模块的高度位置
                            this.setState({
                                viewY2: e.nativeEvent.layout.y,
                            })
                        }}
                        style={{height:Px2dp(400),width:SCREEN_WIDTH,backgroundColor:'#ccbbaa'}}/>

                    <View style={{height:Px2dp(1000),width:SCREEN_WIDTH,backgroundColor:'#ffddaa'}}/>
                </ScrollView>
                {/*返回顶部的点击按钮*/}
                <TouchableOpacity
                    onPress={()=>  this.setState({
                        tabIndex: 0,
                    },()=>this._scroll.scrollTo({ x: 0, y: 0, animated: true }))}
                    activeOpacity={.8}
                    style={[{ position: 'absolute', bottom: Px2dp(15), right: Px2dp(15) }, this.props.style]}
                >
                    <Image source={require('../newImages/to_top_arrow.png')} />
                </TouchableOpacity >
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    // 头部布局
    detailsTab: {
        backgroundColor: Colors.white,
        paddingTop: StatusBarHeight,
        height: NavHeight,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    dsTaberror: {
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        height: NavHeight - StatusBarHeight,
    },
    dsTabcenter: {
        flex: 1,
        flexDirection: 'row',
        height: NavHeight - StatusBarHeight,
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    tabItemText: {
        color: Colors.text666,
        fontSize: Px2dp(14),
        lineHeight: NavHeight - StatusBarHeight,
    },
    tabItemClick: {
        height: NavHeight - StatusBarHeight,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: Px2dp(2),
        borderBottomColor: 'transparent',
    },
});