【开源库】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'} />
-
<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万+ 关注 私信
相关文章推荐
- 开发一个基于React Native的简易demo--读取网络数据并展示
- 开发一个基于React Native的简易demo--源码
- React Native之无fixed属性,如何开发一个悬浮按钮
- 【备忘】2017年最新React开发Native开发安卓与ios平台的GitHub App视频教程
- 一个关于react-native的demo,详细请转GitHub
- 开发一个基于React Native的简易demo--视频组件+布局
- React Native ——实现一个简单的抓取github上的项目数据列表
- 开发一个基于React Native的简易demo--前记
- 开发一个基于React Native的简易demo--导航栏+轮播图
- 【React Native开发】React Native移植原生Android项目(Mac用)
- [React Native混合开发]React Native for iOS之动手写组件
- 【React Native开发】React Native For Android环境配置以及第一个实例
- React Native iOS 开发环境搭建
- React Native入门——布局实践:开发京东客户端首页(二)TabBar的构建
- 安装React Native开发环境 (基于mac)
- [react-native]redux由浅入深详细教程(一):创建项目结构以及一个最简单的demo
- ReactNative 搭建开发环境
- react native 开发环境配置
- 在win10上开发的reactnative 项目移植到mac上无法运行的坑
- React Native 开发常见错误