![](/img/trans.png)
[英]How to get and pass the details of the active slide in react native using react-native-snap-carousel
[英]how to make carousel circular in react-native-snap-carousel?
我有一个简单的轮播,里面有 5 张图片。 到达第 5 张图像后,我希望它到 go 到第一个图像并重新开始。 我试图通过阅读文档来解决它,但我看不到任何可以帮助的东西。 我也试过在网上找一些例子,但找不到。
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
属性将不起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.