js vuecli react-app 字体引入加载缓慢 ，font-spider 根据使用字体生成新的字体文件
闲言少叙 下载 安装Font-spider npm跟着官方教程操作就OK了使用之前引入字体，发现都很大，非常影响加载速度，font-spider可以抽离出你使用到的字体，但是对于单页面的动态数据有点不可行，因为你也不知道返回的数据到底有哪些字体，所以我抽离的少一些固定的标题和十个数字字体。一、测试文...
react项目中使用 Sass 或者 Less
注意：1. 使用脚手架 create-react-app 创建的 react项目，默认使用了webpack ==>> 请注意webpack的版本 2. create-react-app 创建的 react项目，webpack配置默认是隐藏的，如果需要查看或者修改，请使...
react native Xcode打包app发布ipa到蒲公英
1、找到react native 项目，用Xcode打开项目，如下图2、确保运行的选项如下图这个：3、确保苹果开发者的证书，有则可以直接打包，没有的话需要到苹果开发者官网添加证书并且下载放入本地，具体可看下一篇教程专门介绍登录苹果开发者网站 http://developer.apple.com，进入...
Linux环境下React Native环境搭建
一、JDK安装（要求1.8）1.下载1.8版本Linux 64位JDK (jdk-8u231-linux-x64)2.tar 命令解压，然后放到一个自己认为合适的目录，直接拷贝即可3.在系统盘 etc目录下编辑profile文件配置环境变量4.在etc目录下执行：vi profile 或 vim p...
xcode react-native 运行报错clang: error: linker command failed with exit code 1 (use -v to see invocatio
出现这个问题可能的原因有多种，参考 https://www.jianshu.com/p/74c3bd5f4ced这位博主的而我出现的问题，就是缺少node_modules中的某些模块，导致文件获取不到，如下图所示，即缺失了-lRNZhiniaoWebview，考虑是react-native-zhin...
react-native 之android 配置gif图片的使用----------小白的天堂
React-native显示动态图片（gif）的配置突然心血来潮，想把项目中的loading效果换成动态图片的样式，这样会好看一些不会那么单调。然后开始了我的踩坑之路。。。。首先，查看官方网站（react-native中文网），然后选择对应自己的版本号的文档我的是0.50的版本，然后找到Image，...
React事件和原生事件的执行顺序-原生 DOM 事件
原生 DOM 事件的执行顺序： 原生 DOM 事件捕获阶段（Capture Phase）：原生 DOM 事件会在目标元素的最外层顶级组件上触发捕获阶段的事件处理函数。 原生 DOM 事件冒泡阶段（Bubble Phase）：原生 DOM 事件会在组件树中从目标元素的最内层向上冒泡到最外层的顶级...
node实现命令行生成vue或react组件模板
node实现命令行生成vue或react组件模板技能项从git仓库拉取代码执行index.js文件结语技能项您只需要会使用node、git、文件路径基础知识。从git仓库拉取代码git地址(https://github.com/LGDHuaOPER/createTemplateFile)执行inde...
基于React+antd的后台管理模板（可预览）
自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面,比较简单不涉及后台交互。github地址：基于React+antd实现后台模板 预览地址：预览地址 登录的背景图比较大，所以做了一个loading效果，等图载入完毕后再显示登录页...
React搭建个人博客
个人博客搭建前言项目预览 http://lurenhong.top/登录页 (个人使用暂时未开发注册功能)添加标签（方便后期条件查询）添加博客内容以及标签选择 （草稿/发布）展示博客列表（编辑/删除/条件查询及分页）博客展示首页（后台添加博客不对外开放）博客详情页查看（目前已完成阅读量/评论功能开发...
使用 MobX 开发 React Native 应用 @observer 引用报错
本文将 MobX 与 React Native 结合，编写一个简单的列表客户端。这是学习使用 MobX 和 React Native 的一个不错的起点。查看最终的代码库，点击这里。MobX 是一款精准的状态管理工具库，对我来说非常容易学习和接受。我在 React 和 React Native 应用中...
【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件
React18+Typescript+craco配置最小化批量引入Svg并应用的组件 前言创建React + Typescript项目通过require.context实现批量引入Svg安装[@types/webpack-env](https://github.com/DefinitelyT...
解决升级到Xcode10，react native项目运行报错问题
今天刚升级到Xcode10，就遇到两个报错问题错误一：Xcode 10: Build input file double-conversion cannot be founderror: Build input file cannot be found: '../node_modules/react...
React-Native与安卓原生的混合开发
写在前面目前很多大厂APP（如淘宝、饿了么、美团等等）并不是纯原生Android&IOS，也不是纯JS开发，而是Hybird APP开发，混合型优势很多：比如热更新，保证在一些类似双十一的活动到来时能够快速上线活动页面，用户不必再去更新APP。再来有效地减小了安装包的体积大小，大部分的界面都...
【react实战】如何开发嵌入客户端的H5页面黑白模式？
需求：提供用户自行选择的主题模式：黑/白。默认情况下，是白色主题。用户选择的数据传递给后端，然后获取接口（已知接口：DarkMode()）。1.首先写好黑/白模式下的CSS文件.2.在app.js里，在生命周期函数componentDidMout() { }页面加载的时候去判断：定义一个全局变量：—...
React Native 使用百度 Echarts 图表之 Android 端打包后图表不显示的解决办法
参考资料：React Native使用百度Echarts显示图表前言：1.Echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。2.Echarts组件是兼容IOS和安卓双平台的。安装：在React Native项目中安装native-echarts组件，代码如下所示：npm ins...
react-native 屏幕尺寸和文字大小适配
现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则，可以根据不同的尺寸建...
React（二）实现双向数据流
<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-do...
react native 之 webstorm开发（windows）
前言：作为Android开发的老司机，前端时间我在windows上面把reactnative项目做了一个流程的研究，同时也把相关的博客给贴了出去。今天考虑到reactnative的js的书写需要开发工具，就看了一下网上的各种资料，最后选了webstorm作为自己开发reactnative的工具来走了...
React 开发一键生成代码快
我们用的VS code 开发工具，它提供好多强大的插件，安装这些插件可以极大的提高我们的开发效率。1.首先打开VS code 插件，搜索一下两个插件名称，点击右下侧的install点击某个插件，可以查看Details,里面有好多快捷键示例。比如常用的：rcc, rfc, imrc, imr, ccs...