react-native-banner-lite:RN 的一个开源的带有分页效果的半屏 Banner 组件

dmfm2700 7年前
   <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>