npm 发布 ReactNative 阿里 icon-font 插件

代码

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 中测试,其余版本未做覆盖测试。

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

原文链接:segmentfault.com

上一篇:js脚本改变输入框值 触发input事件
下一篇:Egg React SSR 服务端渲染 构建流程

相关推荐

  • 🔥插件开发如此简单!

    本文使用的WebpackQuicklyStarter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。

    3 个月前
  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没fluttersock...

    2 年前
  • 页面CPU和内存占用监控可视化Chrome插件-Graph Process

    写这个插件的原因是最近要对比一下页面的 cpu 和内存占用的性能,本来是想找看看有没有什么软件能够去可视化一下当前标签页的cpu和内存占用,但是发现却找不到这种软件,mac 上有个活动监视器,但是当...

    7 个月前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好...

    5 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    8 个月前
  • 还在用字体图标吗,试试svg图标吧(内附vuecli-svg-sprite-loader插件)

    前言,关于字体图标 ​相信每位前端童鞋都对字体图标不陌生,毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候,我们一般都是用img来当作图标来使用,由于大量地使用img会造成http请求过多的...

    11 天前
  • 轻量级网页遮罩层jQuery插件用法实例

    本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。

    3 年前
  • 轻量的纯 JavaScript 动态提示工具插件库

    Tippy.js Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为t...

    4 个月前
  • 贴近用户体验的Jquery日期、时间选择插件

    分享一款贴近Jquery日期、时间选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。效果图如下: (https://img.javascriptcn.com/5...

    3 年前
  • 谷歌插件抓取一切网站内容以及拦截图片

    平时普通的爬虫:在代码里面发一个请求,然后从流中获取网页内容,解析网页内容得到相关信息。这个方式的优点是简单快捷,缺点是很容易被拦截,失败率高。另辟蹊径的方式就是使用谷歌插件获取页面所有内容,再解析,...

    1 个月前

官方社区

扫码加入 JavaScript 社区