写一个自己的react-native UI组件_Text


刚开始学习react-native，感觉还是很爽的，其一便是组件化的感受(感觉比vue中的组件要有意思)，在写一个小按钮的时候感觉当前组件的代码有点多，于是尝试把按钮单独抽离成一个组件，写着写着感觉这不就是一个小ui库吗🤗，等以后更多的常用组件写入，相信一个属于我的ui库就诞生了，目前我这个ui库叫hongui，已经发布npm了，有兴趣的朋友可以下载看看，下面是我的ui库中仅有的HButton组件的介绍，如下

引入一个HButton，不添加属性，样式：

<HButton />

写一个自己的react-native UI组件_字体图标_02


传入一些属性后

<HButton
                LinearGradientStart={[0, 1]}
                LinearGradientEnd={[1, 1]}
                LinearGradientColor={['#0ff','#00f']}
                FontAwesomeName='heart-o'
                FontAwesomeSize={32}
                FontAwesomeColor='#fff'
                Text="我的收藏"
              />

写一个自己的react-native UI组件_Text_03


使用方法，

npm i hongui -S

安装包后，导入包，导出HButton组件

import {HButton} from '../../components/HongUI/HongUI';

属性：
​​​LinearGradientColor​​​ : 渐变的颜色，暂支持两个颜色，默认​​['#00FA9A','#0f0']​​​ 实例：​​LinearGradientStart={[0, 1]}​​​​LinearGradientStyle​​​:容器的样式设置 默认为空{}
​​​LinearGradientStart​​,​​LinearGradientEnd​​ 渐变颜色的方向 默认 ​​[0, 0][0, 1]​​意为垂直方向，水平为​​[0, 1][1, 1]​​,也可倾斜，可根据需要调节
示例：

LinearGradientStart={[0,1]}
            LinearGradientEnd={[1,0]}

​​FontAwesomeName​​​:图标的名字，这里使用的图标是​​Font Awesome​​这里传的name是

写一个自己的react-native UI组件_ico_04


不带前面的fa-标记，如要使用别的图标库可以在源码里更改图标库的地址，比如要使用ionic icon(图标)可以如下即可

当然使用图标,需要项目中​​react-native-vector-icons​​可以正常使用

还有因为用到了渐变所以要事先安装react-native-linear-gradient，安装完项目应该是需要重新启动才好使的，否则有报错，react native0.6版本后不需要手动link，只要安装到项目中就可以了

import FontAwesome from 'react-native-vector-icons/FontAwesome';
//更改为
import FontAwesome from 'react-native-vector-icons/Ionicons';

​​FontAwesomeSize​​:字体图标的大小 默认25

​​FontAwesomeColor​​

​​Text​​

​​TextStyle​​​ : 传入文字的样式 非必填

​​​onPress​​​:onPress事件

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章

写一个自己的react-native UI组件_字体图标_05