基于移动端Reactive Native轮播组件的应用与开发详解

GaryVanguil 8年前
   <p>总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo。</p>    <p><strong>reactive  native是什么</strong></p>    <p>由非死book开发的一种应用框架,可以用react开发原生应用的框架。简单来说就是可以通过js和react来开发的一种框架。</p>    <p><strong>react是什么</strong></p>    <p>一套js的框架,也是非死book开源。特点:jsx语法(类似XML),组件化模式,virtual DOM,单向数据流。</p>    <p>基本模式:每个react应用可视为组件的组合,而每个react组件由属性和状态来配置,当状态发生变化更新ui,组件的结构是由虚拟的dom来维护。</p>    <p><strong>react  native的应用实例</strong></p>    <p style="text-align: center;"><strong><img src="https://simg.open-open.com/show/65b10aceb87c58169adf3e5db1b18175.png"> </strong></p>    <p><strong>react native的模式</strong></p>    <p>*跨端应用开发(ios,安卓,web) ,基于react的组件化,具备web的发布能力和原生应用的性能。</p>    <p>优点:开发效率高,迭代周期短 ; 复用性(对一些组件进行复用封装)热部署 ; 采用web的方式来开发native的应用</p>    <p><strong>react  native的环境搭建</strong></p>    <p>这里,我还是遇到不少问题,大概写下安装过程,官网上大部分写的比较清楚。</p>    <p>1:安装node</p>    <p>2:执行react native命令行</p>    <p>3:android  studio安装(需要配置sdk)</p>    <p>4:安装bluestacks模拟器(首推) </p>    <p>运行项目</p>    <p>当你所有的环境都搭建好后,在项目目录下,打开命令指示符,输入命令:</p>    <pre>  <code class="language-javascript">crn-cli  run-android</code></pre>    <p>这时候,会自动启动模拟器,无需任何操作,但前提是确保你模拟器已经连接上,如何知道模拟器是否连接上呢?输入下面指令即可查看:</p>    <pre>  <code class="language-javascript">adb  devices</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e6244516e5762952ee57a1fbb1869a50.png"> <img src="https://simg.open-open.com/show/5d2f0854c66b407c0539d0ff59936c69.png"></p>    <p>当项目的apk已经完全安装好后,会自动加载启动我们的项目:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/da451fd8bc78d9fbb5db1487c79b9053.png"> <img src="https://simg.open-open.com/show/1c13e55219de0100205a217585663164.png"></p>    <p><strong>关于轮播组件的加载使用</strong></p>    <p>首先在你的项目中安装该插件模块,然后在你项目代码中引入改模块,进行加载。需要注意的是,需要在某个页面使用该模块,就在该页面中引入该模块。</p>    <pre>  <code class="language-javascript">$ npm i react-native-swiper --save</code></pre>    <p>我们来看下轮播组件在自己框架项目中的某个页面该如何进行引入,这里贴下代码更直观。</p>    <p>我们只需要在头部插入引入的插件,如下:</p>    <pre>  <code class="language-javascript">import Swiper from 'react-native-swiper';</code></pre>    <p>在进行render的时候,进行调用,就可以轻松的使用该插件,应用到我们的开发项目中。</p>    <pre>  <code class="language-javascript"><Swiper style={styles.wrapper} showsButtons={true}>              <View style={styles.slide1}>                <Text style={styles.text}>Hello Swiper</Text>              </View>              <View style={styles.slide2}>                <Text style={styles.text}>Beautiful</Text>              </View>              <View style={styles.slide3}>                <Text style={styles.text}>And simple</Text>              </View>  </Swiper></code></pre>    <p>这里贴下该页面的完整代码,关于rn的样式问题,其实对比css差距还是比较大的。</p>    <pre>  <code class="language-javascript">'use strict';  import React, { Component } from 'react';  import Swiper from 'react-native-swiper';  import {   StyleSheet,   Text,   View,  } from 'react-native';  export default class Page1 extends Page {               render() {    return (     <ViewPort>      <Swiper style={styles.wrapper} showsButtons={true}>              <View style={styles.slide1}>                <Text style={styles.text}>Hello Swiper</Text>              </View>              <View style={styles.slide2}>                <Text style={styles.text}>Beautiful</Text>              </View>              <View style={styles.slide3}>                <Text style={styles.text}>And simple</Text>              </View>      </Swiper>      </ViewPort>    );   }  }  const styles = StyleSheet.create({    wrapper: {     },     slide1: {       flex: 0.5,       justifyContent: 'center',       alignItems: 'center',       backgroundColor: '#9DD6EB',       },     slide2: {       flex: 1,       justifyContent: 'center',       alignItems: 'center',       backgroundColor: '#97CAE5',     },     slide3: {       flex: 1,       justifyContent: 'center',       alignItems: 'center',       backgroundColor: '#92BBD9',     },     text: {       color: '#fff',       fontSize: 30,       fontWeight: 'bold',   }  });</code></pre>    <p>关于各个模块之间的结构可看下下面代码,我们在index.android.js中添加如下代码:</p>    <pre>  <code class="language-javascript">'use strict';  import {      AppRegistry      //注册app  } from 'react-native';  const theCompnent = require('./main');    AppRegistry.registerComponent('HelloTest', () => theCompnent);    //Attention: 此处module.exports必须保留  module.exports = theCompnent;</code></pre>    <p><strong>如何在pc端进行调试呢?</strong></p>    <p>作为开发人员,没有调试工具,真的是很难过啊,还好模拟器提供了调试工具,我们来看下演示demo操作。打开js devmodel即可。调试很方便啦!对于我们在pc上修改的任何东西都会立即显示出来。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/09b5076a19e69bb928df369450e1eda1.gif"> <img src="https://simg.open-open.com/show/65faf8ad8b945580782a959ce7a98bd5.png"></p>    <p>OK,打开浏览器,我们就可以很方便的看到我们自己的文件目录啦。这样我们就可以很方便的在chrome上进行开发啦。</p>    <p> </p>    <p> </p>    <p>来自:http://www.cnblogs.com/jtjds/p/5990367.html</p>    <p> </p>