React Native中的滑动背景图像

Question

我想创建一个由4个图像组成的背景，这些图像将从左向右滑动，每个图像延迟2秒。我已经在本地存储了这些图像。我不知道如何才能做到这一点。

耽误您时间，实在对不起!

克里斯。

Answer 1

以下是您的问题的示例逻辑。

const { width, height } = Dimensions.get('window');
export default class CustomApp extends Component {

  componentDidMount() {
    let scrollValue = 0;
    setInterval(function(){
      scrollValue = scrollValue + width;   // width = screen width 
      _scrollView.scrollTo({x: scrollValue}) 
    }, 3000);
  }
  render() {
    return (
     <View>
       <ScrollView 
        ref={(scrollView) => { _scrollView = scrollView; }}
        horizontal={true} pagingEnabled={true} 
        >
          <Image source={require('./1.jpg')} style={{height, width}} />
          <Image source={require('./2.jpg')} style={{height, width}} />
          <Image source={require('./1.jpg')} style={{height, width}} />
          <Image source={require('./2.jpg')} style={{height, width}} />
       </ScrollView>
       <View style={{ position: 'absolute'}}>
         <Text>Page Content</Text>
      </View>
     </View>
    );
  }
}

Answer 2

作为对JainZz答案的补充，下面是我让图像无限滑动的方法

componentDidMount() {
    const numOfBackground = 4;
    let scrollValue = 0, scrolled = 0;
    setInterval(function () {
        scrolled++;
        if(scrolled < numOfBackground)
            scrollValue = scrollValue + width;
        else{
            scrollValue = 0;
            scrolled = 0
        }
        _scrollView.scrollTo({ x: scrollValue, animated: false })
    }, 3000);
}

我添加了一个逻辑来检查它是否是最后一个图像，并将其滚动回第一个图像。我还将scrollTo属性动画更改为false，以使其看起来更平滑