React-native下拉背景图放大

当时我也逛了好多论坛都没回信，翻看官网文档不是很连贯，后面花了些时间看文档写出来了，分享出来希望对遇到同样需求的有所帮助，希望大家遇到react-native的问题也分享出来，代码在最后，需要在index.js中引入才能看到效果

上代码

import React, {Component} from 'react';
import {
  Animated,
  View,
  StyleSheet,
  PanResponder,
  ImageBackground,
  ScrollView,
  Text,
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      image: {uri: 'https://zh-hans.reactjs.org/logo-og.png'},
      touchViewMove: {y: new Animated.Value(0)}, 
      height: new Animated.Value(210),
      transform: new Animated.Value(1),
    };
  }

  pan = new Animated.ValueXY(); //获取收触摸的位置
  panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    // 触摸按下
    onPanResponderMove: (evt, gestureState) => {
      Animated.parallel([
        //Animated.parallel同时执行多个动画
        Animated.timing(this.state.transform, {
          toValue: gestureState.dy > 0 ? 1.1 : 1,
          duration: 0,
        }),
        Animated.timing(this.state.height, {
          toValue:
            gestureState.dy > 0 && gestureState.dy < 550
              ? 210 + gestureState.dy
              : 210,
          duration: 0,
        }),
      ]).start();
    },
    // 触摸抬起
    onPanResponderRelease: () => {
      Animated.timing(this.state.transform, {
        toValue: 1,
        duration: 300,
      }).start();
      Animated.timing(this.state.height, {
        toValue: 210,
        duration: 300,
      }).start();
    },
  });

  render() {
    return (
      <ScrollView>
        <View style={styles.container} {...this.panResponder.panHandlers}>
          <Animated.View
            style={[
              styles.fadingContainer,
              {
                height: this.state.height,
                transform: [{scale: this.state.transform}],
              },
            ]}>
            <View style={styles.container}>
              <ImageBackground
                source={this.state.image}
                style={[styles.image]}
              />
            </View>
          </Animated.View>
          <Animated.View
            style={{
              transform: [{translateX: this.pan.x}, {translateY: this.pan.y}],
            }}></Animated.View>
          <View style={styles.box}>
            <Text style={styles.text}>
              天儿冷,笑话也冷呢! 来源：笑话集
              1、“大爷，我现场采访您一下，您这样晨跑锻炼坚持几年了？”
              “姑娘别挡道！我尿急！ ” 2、“请问你是做什么工作的？”
              “哦。我的工作是杀僵尸。” “嗯？可是这个世界上没有僵尸啊！ ”
              “你以为它们是怎么没有的？” 3、中午去买菜，感觉都不太新鲜了。
              老板：早上刚到的，都新鲜的。 我：这菜看着就蔫蔫的啊？！
              老板：从早上到现在，它以为没人要自己了，这不垂头丧气么！ 我。。。
              4、我问他：你今天怎么没上班儿啊？ ......
            </Text>
            <Text style={styles.text}>
              天儿冷,笑话也冷呢! 来源：笑话集
              1、“大爷，我现场采访您一下，您这样晨跑锻炼坚持几年了？”
              “姑娘别挡道！我尿急！ ” 2、“请问你是做什么工作的？”
              “哦。我的工作是杀僵尸。” “嗯？可是这个世界上没有僵尸啊！ ”
              “你以为它们是怎么没有的？” 3、中午去买菜，感觉都不太新鲜了。
              老板：早上刚到的，都新鲜的。 我：这菜看着就蔫蔫的啊？！
              老板：从早上到现在，它以为没人要自己了，这不垂头丧气么！ 我。。。
              4、我问他：你今天怎么没上班儿啊？ ......
            </Text>
            <Text style={styles.text}>
              天儿冷,笑话也冷呢! 来源：笑话集
              1、“大爷，我现场采访您一下，您这样晨跑锻炼坚持几年了？”
              “姑娘别挡道！我尿急！ ” 2、“请问你是做什么工作的？”
              “哦。我的工作是杀僵尸。” “嗯？可是这个世界上没有僵尸啊！ ”
              “你以为它们是怎么没有的？” 3、中午去买菜，感觉都不太新鲜了。
              老板：早上刚到的，都新鲜的。 我：这菜看着就蔫蔫的啊？！
              老板：从早上到现在，它以为没人要自己了，这不垂头丧气么！ 我。。。
              4、我问他：你今天怎么没上班儿啊？ ......
            </Text>
            <Text style={styles.text}>
              天儿冷,笑话也冷呢! 来源：笑话集
              1、“大爷，我现场采访您一下，您这样晨跑锻炼坚持几年了？”
              “姑娘别挡道！我尿急！ ” 2、“请问你是做什么工作的？”
              “哦。我的工作是杀僵尸。” “嗯？可是这个世界上没有僵尸啊！ ”
              “你以为它们是怎么没有的？” 3、中午去买菜，感觉都不太新鲜了。
              老板：早上刚到的，都新鲜的。 我：这菜看着就蔫蔫的啊？！
              老板：从早上到现在，它以为没人要自己了，这不垂头丧气么！ 我。。。
              4、我问他：你今天怎么没上班儿啊？ ......
            </Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    width: 412,
    backgroundColor: '#e4e4e4',
    borderRadius: 20,
    marginTop: -39,
  },
  text: {
    padding: 20,
  },
  fadingContainer: {
    width: 412,
  },

  image: {
    flex: 1,
  },

  container: {
    flex: 1,
    flexDirection: 'column',
  },
});