A paging banner component. Compatible with iOS and Android.
It made from ScrollView, but it doesn't depend on the property paging. So the banner can be used in all versions of React Native.
see: ROADMAP.md
Play in the React Native Playground
$ npm i react-native-banner-lite --save- Install
react-nativefirst
$ npm i react-native -g- Initialization of a react-native project
$ react-native init myproject- Import
react-native-banner-litein theindex.ios.jsorindex.android.js
import BannerLite from 'react-native-banner-lite';- Add the
BannerLitecomponent to your code
<BannerLite
items={[
{
title: "Hello",
subtitle: "World",
imageURL: "http://h.hiphotos.baidu.com/image/h%3D200/sign=3a225a4129a4462361caa262a8227246/30adcbef76094b36fbaf3bd6aacc7cd98d109dcf.jpg",
onPress:(index)=>{console.log("tap"+index)}
},
{
title: "How",
subtitle: "R U",
imageURL: "http://a4.att.hudong.com/35/64/01300000276819133197645554930.jpg",
onPress:(index)=>{console.log("tap"+index)}
},
{
title: "R U OK",
subtitle: "😂😂😂",
imageURL: "http://pic69.nipic.com/file/20150610/21067407_235515103000_2.jpg",
onPress:(index)=>{console.log("tap"+index)}
},
]}
/>- Run the project
$ react-native run-iosor
$ react-native run-androidSee the example code in the Example folder.
| Name | Type | Description |
|---|---|---|
| items | array |
banner items array |
The items is an array of objects. The object contains 4 props.
| Name | Type | Description |
|---|---|---|
| title | string |
title of the banner item |
| subtitle | string |
subtitle of the banner item |
| imageURL | string |
background image of the banner item |
| onPress | func |
callback of the banner item tap event |
Welcome to send Email to me, or open issue on the repository.
The project follow to the MIT license. Welcome contributions.