npm 发布 ReactNative 阿里 icon-font 插件

2019-11-03 admin

代码

GITHUB

NPM

缘由

最近使用一个生成二维码插件,看了源码,发现没有什么复杂的NATIVE 处理,是一个webview 包裹的 canvas 实现。

这给我一个新的启发,可以把一些H5上的实现轻易的集成为RN的插件。

开发过程中使用阿里的iconfont, 需要集成react-native-vector-icons 库,虽然作者做了很好的封装,但是相比iconfont 在H5上的集成,简易型还是差很多。

所以我封装一个插件,可以很简单的集成iconfont,你只需把插件import 进来即可,不需要做额外的操作。

实现

插件对外暴露四个属性:

  • link: 阿里ICONFONT css 链接
  • fontSize: Icon 大小
  • iconName:Icon Name
  • color: 颜色

代码

class ReactNativeIconFontOld extends React.Component {
   html = () => {
       const { link, fontSize, iconName, color = '#333' } = this.props;
       return `<html>
           <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
               <link rel="stylesheet" type="text/css" href="${link}">
               <style>
                   html,body{
                       margin:0;
                       padding:0;
                   }
                   .icon{
                       color:${color};
                       font-size:${fontSize}
                   }
               </style>
           </head>
           <body>
               <i class="iconfont icon ${iconName}">
           </body>
       </html>`;
   };
   render() {
       const { fontSize = 20 } = this.props;
       return (
           <View style={{ width: fontSize, height: fontSize }}>
               <WebView source={{ html: this.html() }} />
           </View>
       );
   }
}
export default link => props => (
   <ReactNativeIconFontOld link={link} {...props} />
);

测试

yarn add react-native-web-iconfont

import iconFont from 'react-native-web-iconfont';

const IconFont = iconFont('http://at.alicdn.com/t/font_1391869_fk9kmt1pp1.css');

<IconFont fontSize={20} iconName={icon} color="black" />

问题

webview0.6x 中被RN移除,所以在高版本里需要集成react-native-webpack插件。

本插件实现以及测试案例是在0.61.3中实现的。对于低版本的,我附件了一个低版本的插件 react-native-web-iconfont-old

案例在IOS11 和 华为 Pro30 中测试,其余版本未做覆盖测试。

如果有需要,可以试用下。

[转载]原文链接:https://segmentfault.com/a/1190000020890625

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78795.html

文章标题:npm 发布 ReactNative 阿里 icon-font 插件

相关文章
基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考,具体如下: 1、Marquee.js文件 &#x2F;****************************************************...
2017-02-17
搭建离线npm私库——verdaccio
为了实现快速安装项目的依赖包,不报一堆乱七八糟的错,并且在项目中使用私有依赖包,建一个私库是在所难免的。在网上找了好多资料,最后决定使用verdaccio(那些需要安装数据库的,想想就好麻烦,所以综合考虑了需求和难度,选择了verdacci...
2018-05-16
JS简单实现城市二级联动选择插件的方法
本文实例讲述了JS简单实现城市二级联动选择插件的方法。分享给大家供大家参考。具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技...
2017-03-29
Yarn v0.24.2 发布,新型 Javascript 包管理器
Yarn 是 Facebook 贡献 Javascript 包管理器,用于替代现有的 npm 客户端或者其他兼容 npm 仓库的包管理工具。Yarn 保留了现有工作流的特性,优点是更快、更安全、更可靠。 特性: 极速:Yarn 缓存它下载...
2017-05-08
jQuery插件Skippr实现焦点图幻灯片特效
史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件、响应式布局插件,强大的参数自定义 配置,可自定义切换速度、切换方式、是否显示左右箭头、是否自动播放、自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下...
2017-03-22
[Vue CLI 3] 配置 webpack-bundle-analyzer 插件
首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive zoomable treemap. ...
2018-09-03
10条建议帮助你创建更好的jQuery插件
本文总结了帮助你创建更好jQuery插件的10条建议。分享给大家供大家参考。具体说明如下: 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy &amp; paste ...
2017-03-23
纯JavaScript实现的分页插件实例
本文实例讲述了纯JavaScript实现的分页插件。分享给大家供大家参考。具体如下: &#x2F;&#x2F;总条数(必填) var Num=Number(&lt;?php echo $count;?&gt;) &#x2F;&#x2F;当前...
2017-03-27
js的flv视频播放器插件使用方法
使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧。 &lt;div class=&quot;txt1&quot;&gt; &lt;script type=&quot;text&#x2F;javascript&...
2017-03-24
bootstrap datetimepicker日期插件超详细使用方法介绍
本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;...
2017-03-15
回到顶部