React Native開發(fā)過程中，隨著使用開發(fā)的深入，封裝一些自己的控件使用起來比較方便，控件封裝多了之后，就會可以封裝一個控件，本文就給大家介紹一下控件庫的控件流程以及開發(fā)控件庫都有哪些事情要做。

目錄：

思維導(dǎo)圖

一、控件開發(fā)

首先將已經(jīng)積攢的一些控件代碼封裝好，作為自定義控件庫的一個元素。
下面以一個簡單的例子DoubleText 控件作為樣例控件，控件的代碼如下：控件僅供參考，簡單實現(xiàn)，盡量不增加理解控件庫的開發(fā)流程。

//DoubleText/index.js

import React, {Component} from 'react'
import {Text, View} from 'react-native'
import PropTypes from 'prop-types'
/**
* 自定義控件
* 兩行文本
*/
class DoubleText extends Component {
    static defaultProps = {
        name: '未命名',
        age: 18
    };
    static propTypes = {
        age: PropTypes.number,
        name: PropTypes.string
    };
    render() {
        return <View>
            <Text>DoubleText component! </Text>
            <Text>{this.props.name} || {this.props.age}</Text>
        </View>
    }
}
module.exports = DoubleText;

這個代碼比較簡單，關(guān)鍵是別忘了將控件導(dǎo)出。

二、控件Demo開發(fā)

開發(fā)完控件之后除了要有控件之外，控件如何使用成為控件開發(fā)的標(biāo)配。
編寫一個控件使用的Demo，讓使用控件的同事或者開源給其他使用，在demo展示控件的效果，及各個參數(shù)調(diào)整后的區(qū)別，讓使用者上手更容易，更少處錯誤，也減少了后續(xù)重復(fù)告訴其他人這個控件該如何使用的麻煩。

//DoubleTextDemo.js

import React, {Component} from ‘react'
import {Text, View} from 'react-native'
//使用非統(tǒng)一的引用方式
//import DoubleText from "../DoubleText";
//從組件庫統(tǒng)一的引用方式
const {DoubleText} = require('../lib/rn.lib');
/**
* DoubleText 使用樣例
*/
export default class DoubleTextDemo extends Component {
    render() {
        return <View>
            <Text>DoubleTextDemo</Text>
            <DoubleText name='小麗' age={20}/>
            <DoubleText name='小王' age={22}/>
        </View>;
    }
}

這段代碼中DoubleText 主要有兩個屬性name和age，賦值不同，展示的效果不同，提現(xiàn)出來即可。如果控件封裝的復(fù)雜，參數(shù)較多，就需要多編寫一些樣例，盡量覆蓋控件所有的配置點和展示控件各種功能?？创a上邊的引用方式，是有區(qū)別的，使用非統(tǒng)一的引用方式是咱們沒有封裝控件庫的方式。
從組件庫統(tǒng)一的引用方式，是統(tǒng)一管理控件的方式，后續(xù)的控件目錄會有介紹。這里知道控件庫引入方式兩種都可以成功引入控件就可以。

三、控件目錄

開發(fā)控件庫，不是開發(fā)一兩個控件，需要發(fā)布管理和更新。最好有一個統(tǒng)一的控件入口做更改。下面這段代碼就是將原來控件的引用方式進行了統(tǒng)一，使用者就只看這個類里邊導(dǎo)出的控件，就知道這個控件庫中有哪些控件了，不用挨個找這個控件庫都有哪些控件能用了。
//rn.lib.js

'use strict';
/**
* 此處匯總統(tǒng)一導(dǎo)出組件庫的控件
*/
module.exports = {

  // 兩行文本控件
  get DoubleText() { return require('./DoubleText'); },

  //get DoubleText2() { return require('./DoubleText2'); },

  //get ThreeText() { return require('./ThreeText'); },
};

一個控件使用一個文件夾來實現(xiàn)這個控件，如果這個控件比較復(fù)雜，android和ios段的實現(xiàn)代碼是不一樣的，一個js文件實現(xiàn)一個控件就搞不定了。下面截圖中l(wèi)ib就是控件庫的目錄，DoubleText文件夾就是代表會導(dǎo)出DoubleText控件，里邊的index.js就是對這個控件的實現(xiàn)，這個文件夾下可以有多個js文件作為DoubleText控件的實現(xiàn)文件。下邊目錄中的rn.lib.js是匯總的統(tǒng)一文件.Demo文件下邊的DoubleTextDemo.js文件是對DoubleText使用的樣例介紹。

Demo目錄結(jié)構(gòu)：

文件目錄結(jié)構(gòu).png

代碼執(zhí)行效果如下：

image.png

四、控件介紹及使用文檔

上面將主要代碼實現(xiàn)完成了，給其他同事使用只有程序還是不夠的，
控件的文檔、Demo的介紹，將整個控件庫的Demo鏈接起來形成一個Demo工程的介紹?？丶奈臋n，包含控件是干什么用的，控件有哪些屬性，控件如何使用，控件的功能范圍，這個控件什么能做，什么不能做描述清楚，從這幾個點出發(fā)就是一個比較好的控件庫。

DoubleText 兩行文本控件

描述：是展示兩行文本的控件，文本的上邊一行固定內(nèi)容，可統(tǒng)一更改，下邊一行是根據(jù)傳入的參數(shù)展示傳入的內(nèi)容。

屬性：
name：描述展示姓名字段的文本格式。
age：描述展示年齡的文本格式。

使用樣例：
<DoubleText name='小麗' age={20}/>

控件適用范圍：
固定在表格中的用戶信息展示字段，暫不支持其他地方使用

五、控件的發(fā)布及發(fā)布測試

控件如果內(nèi)部使用，不發(fā)布直接放到工程中使用就可以。
如果想發(fā)布到公網(wǎng)給大家一起使用和驗證，可以參見npm的發(fā)布包的方法
網(wǎng)上有很多教程，可自行查找一下。
最后記得發(fā)布之后進行測試，一個完整的代碼庫就完成，讓其他人羨慕你大牛的代碼吧。

參考資料：
http://www.itdecent.cn/p/289212f74804
https://blog.csdn.net/zyg1515330502/article/details/81112653
https://www.npmjs.com/