React Native 之組件化開(kāi)發(fā)

發(fā)布時(shí)間：2016年11月07日

React Native組件化介紹

React Native的核心思想就是組件化，相當(dāng)于MVC的view,因此開(kāi)發(fā)應(yīng)用的最佳方式就是將功能組件化

組件化最大的優(yōu)點(diǎn)可以使Android和iOS能夠很方便地用很少地代碼使用同一套組件，增加代碼的復(fù)用性

React Native的組件化很簡(jiǎn)單，基本步驟如下

引用需要的庫(kù)

// 引用 import React, { Component } from 'react'; import {
        需要用到的組件庫(kù)
    } from 'react-native';

實(shí)例化視圖入口

// 實(shí)例化視圖入口 // 因?yàn)楝F(xiàn)在還是在想ES6轉(zhuǎn)化過(guò)程中，為了更好的兼容性，這邊使用的是ES5的格式 var 組件名 = React.createClass({
        render(){ return(
                需要實(shí)例化的視圖
            );
        }
    });

視圖樣式入口

// 視圖樣式入口 // 因?yàn)楝F(xiàn)在還是在想ES6轉(zhuǎn)化過(guò)程中，為了更好的兼容性，這邊使用的是ES5的格式 var styles = StyleSheet.create({
        相應(yīng)視圖的樣式
    });

注冊(cè)并輸出組件

module.exports = 組件名;

生成組件后就可以在ios和android中使用生成后的組件了

引入組件庫(kù)

// 引入組件庫(kù) var 自定義組件名 = require('./組件名');

分類導(dǎo)航

React Native 之組件化開(kāi)發(fā)

React Native組件化介紹

延伸閱讀

我想了解如何學(xué)習(xí)

分類導(dǎo)航

React Native 之 組件化開(kāi)發(fā)

React Native組件化介紹

延伸閱讀

我想了解如何學(xué)習(xí)

React Native 之組件化開(kāi)發(fā)