基於Reactive Native輪播組件的應用開發以及移動端模擬器下的調試

標籤：否則   blank   upm   ppt   wrapper   idt   model   geek   color   

總結下這段時間學習reactive native的一些東西，我們來認識一下，被炒得這麼火的rn，究竟是個什麼東西，以及如何去搭建自己的demo。

reactive  native是什麼

由facebook開發的一種應用程式框架，可以用react開發原生應用的架構。簡單來說就是可以通過js和react來開發的一種架構。

react是什麼

一套js的架構，也是facebook開源。特點：jsx文法(類似XML)，組件化模式，virtual DOM,單向資料流。

基本模式：每個react應用可視為組件的組合，而每個react組件由屬性和狀態來配置，當狀態發生變化更新ui，組件的結構是由虛擬dom來維護。

react  native的應用執行個體

react native的模式

*跨端應用開發(ios,安卓，web) ，基於react的組件化，具備web的發布能力和原生應用的效能。

優點：開發效率高，迭代周期短 ; 複用性（對一些組件進行複用封裝）熱部署 ; 採用web的方式來開發native的應用

react  native的環境搭建

這裡，我還是遇到不少問題，大概寫下安裝過程，官網上大部分寫的比較清楚。地址：http://reactnative.cn/docs/0.31/getting-started.html#content ，以下為安卓模擬器使用。

1：安裝node  

2:執行react native命令列

3:android  studio安裝(需要配置sdk)  

4：安裝bluestacks模擬器(首推) ：http://www.bluestacks.cn/   

運行項目

當你所有的環境都搭建好後，在項目目錄下，開啟命令指示符，輸入命令：

crn-cli  run-android

　這時候，會自動啟動模擬器，無需任何操作，但前提是確保你模擬器已經串連上，如何知道模擬器是否串連上呢？輸入下面指令即可查看：

adb  devices

       

當項目的apk已經完整安裝好後，會自動載入啟動我們的項目：

                

關於輪播組件的載入使用

首先在你的項目中安裝該外掛程式模組，然後在你項目代碼中引入改模組，進行載入。需要注意的是，需要在某個頁面使用該模組，就在該頁面中引入該模組。

$ npm i react-native-swiper --save

我們來看下輪播組件在自己架構項目中的某個頁面該如何進行引入，這裡貼下代碼更直觀。

我們只需要在頭部插入引入的外掛程式，如下：

import Swiper from ‘react-native-swiper‘;

在進行render的時候，進行調用，就可以輕鬆的使用該外掛程式，應用到我們的開發項目中。

<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>

這裡貼下該頁面的完整代碼，關於rn的樣式問題，其實對比css差距還是比較大的，這裡給個樣式對比地址：https://github.com/foreverjiangting/react-native-stylesheet-guide

‘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‘,}});

關於各個模組之間的結構可看下下面代碼，我們在index.android.js中添加如下代碼：

‘use strict‘;import {    AppRegistry      //註冊app} from ‘react-native‘;const theCompnent = require(‘./main‘);  AppRegistry.registerComponent(‘HelloTest‘, () => theCompnent);//Attention: 此處module.exports必須保留module.exports = theCompnent;

如何在pc端進行調試呢？

作為開發人員，沒有調試工具，真的是很難過啊，還好模擬器提供了調試工具，我們來看下示範demo操作。開啟js devmodel即可。調試很方便啦！對於我們在pc上修改的任何東西都會立即顯示出來。

          

 OK，開啟瀏覽器，我們就可以很方便的看到我們自己的檔案目錄啦。這樣我們就可以很方便的在chrome上進行開發啦。

最後

最後呢，給大家分享一下這兩天聽QCON的開發大會的資料，收穫還是蠻大的，關鍵是尤雨溪男神，講解vue.js，簡直棒棒噠，貼上所有的ppt演講資料，有興趣的可以看下：

ppt連結網址：http://ppt.geekbang.org/qconsh2016?from=groupmessage&isappinstalled=0

 

 婷風

 出處：http://www.cnblogs.com/jtjds/p/5990367.html 

 如果您覺得閱讀本文對您有協助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意 

轉載文章之後必須在 文章頁面明顯位置給出作者和原文串連否則保留追究法律責任的權利。

 

 

 

 

 

　

 

基於Reactive Native輪播組件的應用開發以及移動端模擬器下的調試