如何在 react-native-snap-carousel 中使轮播循环？

Question

我有一个简单的轮播，里面有 5 张图片。到达第五张图像后，我希望它转到第一张图像并重新开始。我试图通过阅读文档来解决它，但我看不到任何可以帮助的东西。我也试过在网上找一些例子，但没有找到。

import React from 'react';
import { StyleSheet, Text, View, Image} from 'react-native';
import Carousel from 'react-native-snap-carousel';

const data = [
  {
      key:1,
    uri: 'https://i.ibb.co/hYjK44F/anise-aroma-art-bazaar-277253.jpg',
    title: 'Lorem ipsum dolor sit amet',
    content: 'Neque porro quisquam est qui dolorem ipsum quia '
  },
  
];
export default class App extends React.Component {
    
  _renderItem ({item, index}) {
      const { uri, title, content } = item;
        return (
        
            <View style={styles.slide}>
                
                <Image
          source={{ uri: uri }}
          style={styles.imageBackground}
       / >
                
            </View>
            
        );
    }

    render () {
        return (
        <View style={styles.container}>
            <Carousel
              ref={(c) => { this._carousel = c; }}
              data={data}
              renderItem={this._renderItem}
              sliderWidth={300}
              itemWidth={300}
              autoplay={true}
              
            />
            </View>
        );
    }
}

这是我的 package.json 文件

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~38.0.1",
    "expo-status-bar": "^1.0.0",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

自动滚动工作正常。

Answer 1

您在Carousel 中错过了loop={true} 这个属性。

<Carousel
  ref={(c) => { this._carousel = c; }}
  data={data}
  renderItem={this._renderItem}
  sliderWidth={300}
  itemWidth={300}
  autoplay={true}
  loop={true}
/>

还有一个名为enableSnap 的属性，默认为true。如果设置为false，loop 属性将不起作用。