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('./組件名');

    網(wǎng)友評(píng)論