2

我有一个简单的轮播，里面有 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
}

自动滚动工作正常。

4

1 回答 1

2

您loop={true}在Carousel.

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

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

于 2020-06-30T11:38:15.530 回答