如何在 react-native-snap-carousel 中使轮播循环?
how to make carousel circular in react-native-snap-carousel?
我有一个简单的旋转木马,里面有 5 张图片。到达第 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
}
自动滚动工作正常。
您在 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
属性将不起作用。
我有一个简单的旋转木马,里面有 5 张图片。到达第 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
}
自动滚动工作正常。
您在 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
属性将不起作用。