轮播图大家都比较熟悉 ，React Native 如何实现一个轮播图呢？官方是没有提供轮播图组件的，但大家一定用过一个库叫Swiper,Swiper主要实现的效果是轮播图或者左右翻页的效果。但是如果要实现一些效果很炫酷的轮播图、左右翻页效果，Swiper就不能胜任了。今天就给大家介绍一个非常炫酷的UI库-react-native-snap-carouse。
Carouse 介绍
react-native-snap-carouse 是一个Swiper组件，它提供了预览、多布局、视差图像及处理巨大列表数据的能力。可能这些解释有点乏力，到底能提供什么样的效果呢？请看示例：
效果是不是非常赞？看看如何使用
使用介绍
首先安装：
$ npm install --save react-native-snap-carousel
然后在页面中使用Carousel组件：
import Carousel from 'react-native-snap-carousel';
export class MyCarousel extends Component {
_renderItem ({item, index}) {
return (
<View style={styles.slide}>
<Text style={styles.title}>{ item.title }</Text>
</View>
);
}
render () {
return (
<Carousel
ref={(c) => { this._carousel = c; }}
data={this.state.entries}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
/>
);
}
}
文章开头的那几种效果，主要通过一个layout属性来控制：layout 定义Item 的交互动画和渲染方式，有三种取值，defalut，stack，tinder。但是需要注意的是stack、tinder属性将激活useScrollView,看名字就知道内部会用ScrollView实现而不是FlatList。因此，如果你的数据集很大，那么这2种布局将不适合使用，因为所有项目都将被预先渲染。
分别看一下三种效果：
<Carousel layout={'default'} />
-
<Carousel layout={'stack'} layoutCardOffset={18} />,类似iphone切换应用的效果
-
<Carousel layout={'tinder'} layoutCardOffset={9} />， 类似仿探探应用的卡片滑动效果
感谢React Native出色的Animated API，我们能够做到所有这些。基本上，我们对当前滚动位置进行插值，并根据此值向每个项目提供一组动画。但是这些新的布局只是冰山一角,你可以很轻松的实现以下这些效果：
代码：
import React, { PureComponent } from 'react';
import Carousel, { getInputRangeFromIndexes } from 'react-native-snap-carousel';
export default class MyCustomCarousel extends PureComponent {
_scrollInterpolator (index, carouselProps) {
const range = [3, 2, 1, 0, -1];
const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
const outputRange = range;
return { inputRange, outputRange };
}
_animatedStyles (index, animatedValue, carouselProps) {
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
return {
zIndex: carouselProps.data.length - index,
opacity: animatedValue.interpolate({
inputRange: [2, 3],
outputRange: [1, 0]
}),
transform: [{
rotate: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3],
outputRange: ['-25deg', '0deg', '-3deg', '1.8deg', '0deg'],
extrapolate: 'clamp'
})
}, {
[translateProp]: animatedValue.interpolate({
inputRange: [-1, 0, 1, 2, 3],
outputRange: [
-sizeRef * 0.5,
0,
-sizeRef, // centered
-sizeRef * 2, // centered
-sizeRef * 3 // centered
],
extrapolate: 'clamp'
})
}]
};
}
render () {
return (
<Carousel
// other props
scrollInterpolator={this._scrollInterpolator}
slideInterpolatedStyle={this._animatedStyles}
useScrollView={true}
/>
);
}
}
只给出了部分代码，全部代码及文档请看：https://github.com/archriss/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md
ParallaxImage 组件
Carsousel库中还提供了另外一个组件ParallaxImage,一个知道轮播的当前滚动位置的图像组件，因此能够显示出不错的视差效果。效果图如下：
代码如下：
import Carousel, { ParallaxImage } from 'react-native-snap-carousel';
import { Dimensions, StyleSheet } from 'react-native';
const { width: screenWidth } = Dimensions.get('window')
export default class MyCarousel extends Component {
_renderItem ({item, index}, parallaxProps) {
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{ item.title }
</Text>
</View>
);
}
render () {
return (
<Carousel
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={this.state.entries}
renderItem={this._renderItem}
hasParallaxImages={true}
/>
);
}
}
const styles = StyleSheet.create({
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
})
以上只是列出了一些主要的效果，但远不止这些，它提供了很多的属性和方法来方便的创建和操作它们，详细的文档请看Github:https://github.com/archriss/react-native-snap-carousel
