基於移動端Reactive Native輪播組件的應用與開發詳解

總結下這段時間學習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 

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

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