vlambda博客
学习文章列表

为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


Demo


How to use

  • install
    npm i react-native-animated-carousel --save

  • import
    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 发布组件