npm 发布 ReactNative 阿里 icon-font 插件

最新推荐文章于 2023-07-17 14:45:47 发布

weixin_42117465

最新推荐文章于 2023-07-17 14:45:47 发布

阅读量171

点赞数

分类专栏： ReactNative 文章标签： ReactNative

本文链接：https://blog.csdn.net/weixin_42117465/article/details/102878563

版权

ReactNative 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码

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" />

问题

webview 在0.6x 中被RN移除，所以在高版本里需要集成react-native-webpack插件。

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

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

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

weixin_42117465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
npm 发布 ReactNative 阿里 icon-font 插件

代码GITHUBNPM缘由最近使用一个生成二维码插件，看了源码，发现没有什么复杂的NATIVE 处理，是一个webview 包裹的 canvas 实现。这给我一个新的启发，可以把一些H5上的实现轻易的集成为RN的插件。开发过程中使用阿里的iconfont，需要集成react-native-vector-icons 库，虽然作者做了很好的封装，但是相比iconfont 在H5上的集成，...
复制链接

扫一扫

专栏目录