React Native开发过程中，随着使用开发的深入，封装一些自己的控件使用起来比较方便，控件封装多了之后，就会可以封装一个控件，本文就给大家介绍一下控件库的控件流程以及开发控件库都有哪些事情要做。
目录：
思维导图
一、控件开发
首先将已经积攒的一些控件代码封装好，作为自定义控件库的一个元素。
下面以一个简单的例子DoubleText 控件作为样例控件，控件的代码如下：控件仅供参考，简单实现，尽量不增加理解控件库的开发流程。
//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;
这个代码比较简单，关键是别忘了将控件导出。
二、控件Demo开发
开发完控件之后除了要有控件之外，控件如何使用成为控件开发的标配。
编写一个控件使用的Demo，让使用控件的同事或者开源给其他使用，在demo展示控件的效果，及各个参数调整后的区别，让使用者上手更容易，更少处错误，也减少了后续重复告诉其他人这个控件该如何使用的麻烦。
//DoubleTextDemo.js
import React, {Component} from ‘react'
import {Text, View} from 'react-native'
//使用非统一的引用方式
//import DoubleText from "../DoubleText";
//从组件库统一的引用方式
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，赋值不同，展示的效果不同，提现出来即可。如果控件封装的复杂，参数较多，就需要多编写一些样例，尽量覆盖控件所有的配置点和展示控件各种功能。看代码上边的引用方式，是有区别的，使用非统一的引用方式是咱们没有封装控件库的方式。
从组件库统一的引用方式，是统一管理控件的方式，后续的控件目录会有介绍。这里知道控件库引入方式两种都可以成功引入控件就可以。
三、控件目录
开发控件库，不是开发一两个控件，需要发布管理和更新。最好有一个统一的控件入口做更改。下面这段代码就是将原来控件的引用方式进行了统一，使用者就只看这个类里边导出的控件，就知道这个控件库中有哪些控件了，不用挨个找这个控件库都有哪些控件能用了。
//rn.lib.js
'use strict';
/**
* 此处汇总统一导出组件库的控件
*/
module.exports = {
// 两行文本控件
get DoubleText() { return require('./DoubleText'); },
//get DoubleText2() { return require('./DoubleText2'); },
//get ThreeText() { return require('./ThreeText'); },
};
一个控件使用一个文件夹来实现这个控件，如果这个控件比较复杂，android和ios段的实现代码是不一样的，一个js文件实现一个控件就搞不定了。下面截图中lib就是控件库的目录，DoubleText文件夹就是代表会导出DoubleText控件，里边的index.js就是对这个控件的实现，这个文件夹下可以有多个js文件作为DoubleText控件的实现文件。下边目录中的rn.lib.js是汇总的统一文件.Demo文件下边的DoubleTextDemo.js文件是对DoubleText使用的样例介绍。
Demo目录结构：
文件目录结构.png
代码执行效果如下：
image.png
四、控件介绍及使用文档
上面将主要代码实现完成了，给其他同事使用只有程序还是不够的，
控件的文档、Demo的介绍，将整个控件库的Demo链接起来形成一个Demo工程的介绍。控件的文档，包含控件是干什么用的，控件有哪些属性，控件如何使用，控件的功能范围，这个控件什么能做，什么不能做描述清楚，从这几个点出发就是一个比较好的控件库。
DoubleText 两行文本控件
描述：是展示两行文本的控件，文本的上边一行固定内容，可统一更改，下边一行是根据传入的参数展示传入的内容。
属性：
name：描述展示姓名字段的文本格式。
age：描述展示年龄的文本格式。
使用样例：
<DoubleText name='小丽' age={20}/>
控件适用范围：
固定在表格中的用户信息展示字段，暂不支持其他地方使用
五、控件的发布及发布测试
控件如果内部使用，不发布直接放到工程中使用就可以。
如果想发布到公网给大家一起使用和验证，可以参见npm的发布包的方法
网上有很多教程，可自行查找一下。
最后记得发布之后进行测试，一个完整的代码库就完成，让其他人羡慕你大牛的代码吧。
参考资料：
https://www.jianshu.com/p/289212f74804
https://blog.csdn.net/zyg1515330502/article/details/81112653
https://www.npmjs.com/
网友评论