React Native实现页面组件滚动差——视差功能

之前写过一篇文章：轻松实现视差功能，以小程序为例，这篇文章正是讲解的滚动视差。

那么今天我在React Native上实现一下视差功能。

需要用到的知识点：

1. React Native 页面状态值 State，状态值的初始化及改变。
2. React Native 页面滚动距离的获取。
3. RN组件的样式动态设置。

视差功能原理：
视差效果就是让多层背景以不同的速度去移动。

1. 至少需要两层背景。一个是缓慢移动区，另一个是正常移动区。
2. 将背景设置为相对布局。通过给缓慢区设置top值来缓冲scroll滚动。
3. 根据滑动事件监听，获取滚动距离值。
4. 通过计算，得到需要缓冲的top值。
5. 视觉差的形成条件，正常移动区域超过缓慢移动区域的时候要进行覆盖，所以需要给正常移动区设置z-index属性，大于缓慢移动区。

计算公式：所需缓冲top值 = 当前页面滑动距离 - （当前页面滑动距离 / 滚动差）
所谓滚动差，就是缓慢移动区和正常移动区移动 速度倍速差。

OK，接下来是代码时刻：

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

export default class HomeScreen extends Component{
    
    

    constructor(props) {
    
    
        super(props);
        this.state = {
    
    
            sctop:0,
        };
      }
    render(){
    
    
        return (
            <ScrollView style={
    
    style.sv}  onScroll = {
    
    (event)=>{
    
    {
    
    
                console.log(event.nativeEvent.contentOffset.y);
                this.setState({
    
    
                    sctop:event.nativeEvent.contentOffset.y-(event.nativeEvent.contentOffset.y/2)
                });
              }}}>
                <View style={
    
    style.text}>
                    <View style={
    
    [style.top,{
    
    top:this.state.sctop}]}>
                        <Text>上区域</Text>
                    </View>
                    <View style={
    
    style.bottom}>
                        <Text>下区域</Text>
                    </View>
                </View>
            </ScrollView>
        );
    }
}
const style = StyleSheet.create({
    
    
    sv:{
    
    
        flex:1,
    },
    text:{
    
    
        justifyContent:'center',
        alignItems:'center',
    },
    top:{
    
    
        height:300,
        backgroundColor:'#666666',
        width:350,
        marginBottom:20,
        position:'relative'
    },
    bottom:{
    
    
        height:900,
        backgroundColor:'#999999',
        width:350,
        position:'relative',
        zIndex:1
    }
})

以上就是视差功能的完整代码，需要注意的点有：

1. 由于页面需要上下滚动才能形成视差的效果，所以，页面组件需要被ScrollView 组件包括。
2. 滑动函数是写在ScrollView 属性的位置，通过参数event获取上下滑动距离：event.nativeEvent.contentOffset.y，左右滑动距离：event.nativeEvent.contentOffset.x 。
3. 需要形成视差的两个组件都需要设置 position:'relative’样式。
4. 由于需要动态的给被覆盖的组件设置top来减慢其滑动速度，因而需要设置State值来设置top。
5. State的值作用范围只在此类里面，所以此动态样式需要写在组件上。须通过数组，添加多个样式。
6. 计算top值的代码直接写在组件内部，这是js的语法可以支持。
7. 实时改变State的值需要通过this.setState({})来设置。

注意以上几点，RN视差功能让你明明白白！

有问题可以下方留言~