react-native-snap-carousel 轮播
1. 安装以及使用
yarn add react-native-snap-carousel -S
或
npm install react-native-snap-carousel -S
使用
import Carousel from 'react-native-snap-carousel';
2. <ParallaxImage /> component
2.1 示例(右边为我们做出的真实效果)
图2-1
图2-2
2.2 示例代码
import * as React from 'react';
import {
Text,
View,
SafeAreaView,
Dimensions,
StyleSheet,
} from 'react-native';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
const { width} = Dimensions.get('window')
class Carousel extends React.Component {
constructor(props) {
super(props);
this.state = {
// 这个就是传入的数据，如果是请求后台的数据的话，只要和下面这个对象数组格式保持一致就好
entries: [
{
title: 'Beautiful and dramatic Antelope Canyon',
subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609990165&di=d35d99a47ba08dc9e3220d8515936230&imgtype=0&src=http%3A%2F%2Fwww.wodejia0.com%2Fimages%2Fobuwgnbonzuxa2ldfzrw63i%2F20090810%2F3114308_003924034_2.jpg',
},
{
title: 'Earlier this morning, NYC',
subtitle: 'Lorem ipsum dolor sit amet',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609997081&di=5492fbd5f7dfb9dc72761e07e95809c2&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201411%2F20%2F145145w5u4504gu4th7g0z.jpg',
},
{
title: 'White Pocket Sunset',
subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609993973&di=258911ca593f9659a47e5f4fe601f466&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191006%2F19%2F1570360737-HvGOTkxnum.jpg',
},
],
}
}
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.illustration }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
);
}
render () {
return (
<View style={styles.carousel_container}>
<Carousel
sliderWidth={width}
sliderHeight={width}
itemWidth={width - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
carousel_container: {
marginTop: 40,
},
item: {
flexDirection: 'row',
justifyContent: 'center',
width: width - 60,
height: width - 80,
},
title: {
display: 'flex',
position: 'absolute',
bottom: 10,
color: 'white',
// backgroundColor: 'rgba(208, 208, 208, .6)',
width: '100%',
height: 45,
lineHeight: 45,
fontSize: 20,
paddingLeft: 10,
borderWidth: 5,
borderTopWidth: 0,
borderBottomWidth: 0,
borderLeftWidth: 5,
borderRightWidth: 0,
borderLeftColor: '#3399FF'
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }),
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
export default Carousel;
3. <Pagination /> component
3.1 示例(下面为我们做出的真实效果)
图3-1
图3-2
3.2 示例代码
import * as React from 'react';
import {
Text,
View,
SafeAreaView,
Dimensions,
StyleSheet,
} from 'react-native';
import Carousel, {Pagination} from 'react-native-snap-carousel';
const { width} = Dimensions.get('window')
class Carousel extends React.Component {
constructor(props) {
super(props);
this.state = {
activeSlide: 0,
entries: [
{
title: 'Beautiful and dramatic Antelope Canyon',
subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609990165&di=d35d99a47ba08dc9e3220d8515936230&imgtype=0&src=http%3A%2F%2Fwww.wodejia0.com%2Fimages%2Fobuwgnbonzuxa2ldfzrw63i%2F20090810%2F3114308_003924034_2.jpg',
},
{
title: 'Earlier this morning, NYC',
subtitle: 'Lorem ipsum dolor sit amet',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609997081&di=5492fbd5f7dfb9dc72761e07e95809c2&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201411%2F20%2F145145w5u4504gu4th7g0z.jpg',
},
{
title: 'White Pocket Sunset',
subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596609993973&di=258911ca593f9659a47e5f4fe601f466&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191006%2F19%2F1570360737-HvGOTkxnum.jpg',
},
{
title: 'Acrocorinth, Greece',
subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2759078875,3643456742&fm=26&gp=0.jpg',
},
{
title: 'The lone tree, majestic landscape of New Zealand',
subtitle: 'Lorem ipsum dolor sit amet',
illustration: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596620354134&di=b809b4f153feb0b52cc2be9cbc85475e&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F18%2Fc1%2F12378628_1342603613470.jpg',
},
],
}
}
_renderItem({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{uri: item.illustration}}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
);
}
get pagination() {
const { entries, activeSlide } = this.state;
return (
<Pagination
dotsLength={entries.length}
activeDotIndex={activeSlide}
containerStyle={{ backgroundColor: 'rgba(208, 208, 208, 0)' }}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 8,
backgroundColor: 'rgba(0, 0, 0, 0.5)'
}}
inactiveDotStyle={{
// Define styles for inactive dots here
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
}
render () {
return (
<View style={styles.carousel_container}>
<Carousel
sliderWidth={width}
sliderHeight={width}
itemWidth={width - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
onSnapToItem={(index) => this.setState({ activeSlide: index }) }
/>
{ this.pagination }
</View>
);
}
}
const styles = StyleSheet.create({
carousel_container: {
marginTop: 40,
// backgroundColor: 'rgba(208, 208, 208, .6)',
},
item: {
flexDirection: 'row',
justifyContent: 'center',
width: width - 60,
height: width - 80,
},
title: {
display: 'flex',
position: 'absolute',
bottom: 10,
color: 'white',
// backgroundColor: 'rgba(208, 208, 208, .6)',
width: '100%',
height: 45,
lineHeight: 45,
fontSize: 20,
paddingLeft: 10,
borderWidth: 5,
borderTopWidth: 0,
borderBottomWidth: 0,
borderLeftWidth: 5,
borderRightWidth: 0,
borderLeftColor: '#3399FF'
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }),
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
export default Carousel;
4. 如果你想查看更多参数可以查看官网
https://www.npmjs.com/package/react-native-snap-carousel
5. 小参数大布局（只要在Carousel中加上参数就可发挥作用）
5.1 默认
参数
<Carousel layout={'default'} />
结果
5.2 Stack
参数
<Carousel layout={'stack'} layoutCardOffset={`18`} />
结果
5.3 Tinder
参数
<Carousel layout={'tinder'} layoutCardOffset={`9`} />
结果
5.4 叮！
You should NOT use stack or tinder layouts if you have a large data set to display. In order to avoid rendering issues, the carousel will use a ScrollView component rather than a FlatList one for those layouts (see prop useScrollView). The tradeof is that you won't benefit from any of FlatList's advanced optimizations. See this issue for workarounds; or you may want to implement your own custom interpolation.
大概意思就是如果数据过多的情况下不要用stack或者tinder布局，因为他们是基于scrollView的，所以如果数据很多的话会增大系统开销。
