Voyz's Studio.

为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

  • install

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 发布组件

CATALOG
  1. 1. 为React Native开发的轮播展示动画组件
  2. 2. Hello, folks!
    1. 2.1. Catalog
    2. 2.2. Demo
    3. 2.3. How to use
    4. 2.4. Properties
      1. 2.4.1. item properties ↓
    5. 2.5. Versions