基於移動端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 

 若是您以爲閱讀本文對您有幫助，請點一下「推薦」按鈕，您的「推薦」將是我最大的寫做動力！歡迎各位轉載，可是未經做者本人贊成 

轉載文章以後必須在 文章頁面明顯位置給出做者和原文鏈接不然保留追究法律責任的權利。