react native 单张背景图片纵向循环向上偏移

要实现 React Native 中单张背景图片纵向循环向上偏移的效果，可以使用 `Animated` 和 `ImageBackground` 组件。首先，在需要循环滚动的页面中，引入 `Animated` 和 `ImageBackground` 组件并创建一个 `Animated.Value` 实例：

import React, { Component } from 'react';
import { ImageBackground, Animated } from 'react-native';

class BackgroundImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animatedValue: new Animated.Value(0),
    };
  }
}

然后，在组件的 `componentDidMount` 生命周期方法中，启动一个动画，使背景图片向上滚动：

class BackgroundImage extends Component {
  componentDidMount() {
    Animated.loop(
      Animated.timing(this.state.animatedValue, {
        toValue: -this.props.height,
        duration: this.props.duration,
        useNativeDriver: false,
      })
    ).start();
  }

  render() {
    const translateY = this.state.animatedValue;
    return (
      <Animated.ImageBackground
        source={this.props.source}
        style={[this.props.styles, { transform: [{ translateY }] }]}
      >
        {this.props.children}
      </Animated.ImageBackground>
    );
  }
}

在上面的代码中，动画使用 `Animated.loop` 方法创建，将 `Animated.Value` 实例作为参数传入。`Animated.timing` 方法用来创建一个定时器，控制 `Animated.Value` 实例的变化。动画的 `toValue` 属性设置为 `-this.props.height`，表示图片向上滚动的距离等于图片高度。`duration` 属性表示动画持续时间。`useNativeDriver` 属性设置为 `false`，因为在 Web 上不支持原生驱动。

在 `render` 方法中，使用 `Animated.ImageBackground` 组件展示背景图片，并将 `translateY` 绑定到 `transform` 属性上，表示垂直方向上的偏移量。最后，将组件的 `source`、`styles` 和 `children` 属性传递给 `Animated.ImageBackground` 组件。完成后，在需要使用该组件的地方，直接使用 `BackgroundImage` 组件即可实现单张背景图片纵向循环向上偏移的效果。