移動端Reactive Native輪播組件

標籤：安裝   輪播   const   upm   button   開發項目   查看   命令列   nat   

移動端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/   

運行項目

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

1	crn-cli  run-android

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

1	adb  devices

       

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

                

關於輪播組件的載入使用

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

1	$ npm i react-native-swiper --save

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

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

1	import Swiper from ‘react-native-swiper‘;

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

1234567891011

<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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

‘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中添加如下代碼：

123456789

‘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輪播組件