您的位置:首页 > Web前端 > React

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

2020-05-01 07:22 746 查看

轮播图大家都比较熟悉 ,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

依然饭特稀西 原创文章 76获赞 38访问量 3万+ 关注 私信
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: