为React Native开发的轮播展示动画组件

React Native

字数统计: 211阅读时长: 1 min

 2020/09/23   Share

为React Native开发的轮播展示动画组件

Hello, folks!

🦄 This is a wonderful animated carsouel hooks component for React-Native

✨ 为React Native开发的轮播展示动画组件

👨🏻‍💻 Powered by Voyz Shen

🏫 Shanghai Jiao Tong University, Ctrip

Catalog

Demo

How to use

Properties

Versions

Demo

How to use

install

1	npm i react-native-animated-carousel --save

import

1	import AnimatedCarousel from 'react-native-animated-carousel'

Demo

const testData = [
  {
    title:'医疗',
    subTitle:'副标题1',
    bgImage:'https://i.loli.net/2020/09/17/qxoJu8G3fe97lrc.png',
    jumpUrl:''
  },
  ...
  {
    title:'生活',
    subTitle:'副标题12',
    bgImage:'https://i.loli.net/2020/09/17/rgiPpKRafObAQvN.png',
    jumpUrl:''
  }
]

...

<AnimatedCarousel cardList={testData} ></AnimatedCarousel>

Properties

Prop	Default	Options	Type	Description
cardList	/	/	Array	data of cards
				卡片数据

item properties ↓

Prop	Default	Options	Type	Description
title	/	/	String	title of card
subTitle	/	/	String	subtitle of card
bgImage	/	/	String	background image of card
jumpUrl	/	/	String	jump URL of card

Versions

v1.0.1 添加配置参数

v1.0.0 发布组件

Next Post

LeetCode算法笔记--最长公共前缀
Previous Post

LeetCode算法笔记--分式化简

CATALOG

1. 为React Native开发的轮播展示动画组件
2. Hello, folks!

