react-native-banner-lite:RN 的一个开源的带有分页效果的半屏 Banner 组件
dmfm2700
8年前
<h2><strong>react-native-banner-lite</strong></h2> <p>A banner component with adsorption. Compatible with iOS and Android.</p> <h2><strong>Roadmap</strong></h2> <p>see:ROADMAP.md</p> <h2>Preview</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/0bbf3a4af5fd5122777a521cf5d74396.gif"></p> <h3><strong>Getting Started</strong></h3> <h3><strong>Installation</strong></h3> <pre> <code class="language-javascript">$ npm i react-native-banner-lite --save</code></pre> <h3><strong>Usage</strong></h3> <ul> <li>Install react-native first</li> </ul> <pre> <code class="language-javascript">$ npm i react-native -g</code></pre> <ul> <li>Initialization of a react-native project</li> </ul> <pre> <code class="language-javascript">$ react-native init myproject</code></pre> <ul> <li>Import react-native-banner-lite in the index.ios.js or index.android.js</li> </ul> <pre> <code class="language-javascript">import BannerLite from 'react-native-banner-lite';</code></pre> <ul> <li>Add the BannerLite component in your code</li> </ul> <pre> <code class="language-javascript"><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: ":dog::dog::dog:", subtitle: "呵呵呵呵呵", imageURL: "http://pic69.nipic.com/file/20150610/21067407_235515103000_2.jpg", onPress:(index)=>{console.log("tap"+index)} }, ]} /></code></pre> <ul> <li>Run the project</li> </ul> <pre> <code class="language-javascript">$ react-native run-ios</code></pre> <p>or</p> <pre> <code class="language-javascript">$ react-native run-android</code></pre> <p>See the example code in the Example folder.</p> <h3>Parameters</h3> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>items</td> <td>array</td> <td>banner items array</td> </tr> </tbody> </table> <p>The items is an array of objects. The object contains 4 props.</p> <table> <thead> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>string</td> <td>title of the banner item</td> </tr> <tr> <td>subtitle</td> <td>string</td> <td>subtitle of the banner item</td> </tr> <tr> <td>imageURL</td> <td>string</td> <td>background image of the banner item</td> </tr> <tr> <td>onPress</td> <td>func</td> <td>callback of the banner item tap event</td> </tr> </tbody> </table> <h2><strong>Contribution</strong></h2> <ul> <li> <p>@talisk</p> </li> </ul> <h2><strong>Questions</strong></h2> <p>Welcome to send Email to me, or open issue on the repository.</p> <p>The project follow to the MIT license. Welcome contributions.</p> <p> </p> <p> </p>