【开源库】Github 标6k+,React Native开发不得不用的一个UI库

轮播图大家都比较熟悉 ，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'} />

default.gif

• <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