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

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

reactive  native是什么

由非死book開發的一種應用框架，可以用react開發原生應用的框架。簡單來說就是可以通過js和react來開發的一種框架。

react是什么

一套js的框架，也是非死book開源。特點：jsx語法(類似XML)，組件化模式，virtual DOM,單向數據流。

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

react  native的應用實例

react native的模式

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

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

react  native的環境搭建

這里，我還是遇到不少問題，大概寫下安裝過程，官網上大部分寫的比較清楚。

1：安裝node

2:執行react native命令行

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

4：安裝bluestacks模擬器(首推) 

運行項目

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

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差距還是比較大的。

'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上進行開發啦。

 

 

來自：http://www.cnblogs.com/jtjds/p/5990367.html