![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 57
好巧.
欢迎访问我的github主页: https://github.com/xlz122
展开
-
react native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。选择 Path 变量,单击编辑,变量值为 Android SDK 安装路径下的 platform-tools 文件夹。启动后, 进入夜神模拟器安装目录的 bin 文件夹,打开命令符执行下面的命令(只需执行一次)如果出现如下情况,说明未自动安装 Android SDK,单击 Edit 进入安装页面。,下载时选择 >= 18 版本。,下载时选择 17 版本。原创 2023-12-11 15:53:57 · 2199 阅读 · 0 评论 -
react-native-web 阿里字体图标ttf文件不加载、乱码问题
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果本篇文章对你有帮助的话,很高兴能够帮助上你。include:存放字体图标文件的相对路径。原创 2022-09-17 12:14:57 · 685 阅读 · 0 评论 -
react native android环境搭建,使用vscode和夜神模拟器进行开发(适用于0.68+版本)
变量值:java_jdk 安装地址(如果不知道,可以去C盘下找Program Files、Program Files (x86)这两个文件夹,会有一个java文件夹,里边就有jdk)当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。,来获得编译Android应用所需的工具和环境,比如Android Sdk (默认会安装最新版本的 Android Sdk),下载 >= 11 版本,注意下载的是exe文件。原创 2023-02-02 14:44:47 · 3236 阅读 · 1 评论 -
react 打包优化,配置生产环境不输出console.log
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。成功之后 在项目根目录会出现一个。原创 2023-01-05 15:10:30 · 1412 阅读 · 0 评论 -
react native 多平台配置,使用react-native-web运行在web端(自定义webpack.config.js配置篇)
官方脚手架有一个App.tsx文件在根目录,而react-native-web官方提供的 webpack 配置并没有配置解析这个文件,需要添加到include。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。本篇文章使用的自定义 webpack 配置的方式,配置起来相对麻烦一点。配置 html-webpack-plugin 插件。这个插件是官网没有提到的,算是一个坑。webpack配置在官网 -原创 2022-09-16 17:17:42 · 3987 阅读 · 8 评论 -
react native 多平台配置,使用react-native-web运行在web端(react-scripts插件篇)
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。本篇文章使用的是 react 官方提供的webpack配置包(react-scripts),对于react很熟悉的会非常方便。eject 用于暴露 webpack 配置,比如需修改 index.html、index.web.js 入口文件的存放位置等。入口文件依旧是根目录的 index.js 文件,App.tsx 被移动至 src 目录下,所以需修改路径。原创 2022-09-16 17:39:37 · 1411 阅读 · 0 评论 -
react native 配置路径别名alias
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。新建 src 文件夹,使用 @ 别名引入 src 文件夹下的文件。这一步 ts 项目才需要,js 项目直接看下一步。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2022-09-27 16:53:55 · 1517 阅读 · 0 评论 -
next 配置全局scss变量、函数
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。新建 index.module.scss 文件,添加如下内容。如果本篇文章对你有帮助的话,很高兴能够帮助上你。修改 index.tsx 文件。添加如下scss变量、函数。原创 2023-01-03 17:05:06 · 1685 阅读 · 0 评论 -
react native 0.70版本使用ant-design-mobile-rn及icons字体图标库
示例为全局使用的方式,官方文档的示例是按需引入的,因此全局使用的需要自己去 node_modules/@ant-design/react-native/lib/ 找对应的组件名称。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。android文件夹: android\app\src\main\assets。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2022-09-14 16:10:12 · 3782 阅读 · 24 评论 -
react native 0.70版本初始化项目报错 cli.init is not a function
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。提示是否安装 react-native 包,输入 y 回车(下载并执行 CLI 的当前稳定版本)原因:全局安装或安装特定版本的 react-native-cli。使用命令 react-native -v 查看是否成功移除。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2022-09-06 10:37:05 · 2643 阅读 · 5 评论 -
react native 使用阿里字体图标库
注:手动链接(react-native link)已从 react-native 0.69 中删除,以支持自动链接功能,需使用另外一个插件react-native-asset。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。将iconfont图标文件放置在src/assets/fonts。根目录新建 react-native.config.js。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2022-08-30 11:31:50 · 1003 阅读 · 2 评论 -
react cli配置stylelint样式规范
如果想使用airbnb或prettier的规范,改为stylelint-config-airbnb或stylelint-config-prettier即可。使用airbnb或prettier规范的话,将extends里的stylelint-config-standard替换即可,参考第一步中的规则配置插件部分。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。配置项,可以直接将配置项加在第一项。原创 2022-07-20 16:39:08 · 1180 阅读 · 0 评论 -
react native 0.69版本初始化项目报错 cli.init is not a function
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。创建一个空的文件夹来运行这个命令,执行这个命令后会生成以下文件 ,创建好新项目后删掉即可。本篇文章的解决方法依然有效,不过目前找到了更简单的解决方法。如果本篇文章对你有帮助的话,很高兴能够帮助上你。使用命令 react-native -v 查看。原创 2022-06-23 15:13:36 · 3977 阅读 · 2 评论 -
react native 端口号被占用,修改启动端口号
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。例如:已经启动了一个rn项目,接着又启动一个rn项目(rn项目默认端口号为8081,不会自动递增)直接在启动命令后边加,相比于第一种方式,这种需要每次启动都手动加上启动端口号。第一种方法为每次启动都用固定的端口号,如果只是临时用一下可以看第二种方法。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2022-03-23 09:37:40 · 2718 阅读 · 0 评论 -
react 打包优化,cdn引入css、js
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。build.js配置的CDN css js链接,需要在index.html文配置引入。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。成功之后 在项目根目录会出现一个。原创 2021-09-26 10:16:53 · 3907 阅读 · 2 评论 -
react native 使用android(安卓)手机进行调试
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。开启方式:打开设置 - 关于手机 - 多次点击系统版本,参考下图。如出现如下图:unauthorized(未经授权)如果本篇文章对你有帮助的话,很高兴能够帮助上你。使用 adb devices 检测是否连接成功。解决:先杀死adb服务,再打开。手机出现应用安装提示。原创 2021-08-10 14:16:15 · 2284 阅读 · 0 评论 -
react native 使用ant-design-mobile-rn的icon字体库
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。如果不安装 @ant-design/icons-react-native 直接link,会出现如下报错。本文仅适用于 “react-native”: “0.68.x” 及以下版本。使用 react-native -v 查看是否安装成功。如果本篇文章对你有帮助的话,很高兴能够帮助上你。,只有下面简单的一句话,让人很懵逼。原创 2021-08-06 11:42:09 · 1408 阅读 · 4 评论 -
react native 使用浏览器控制台查看网络请求数据
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。终端输出 JavaScript logs will appear in your browser console ,就表示成功了。如果需要关闭 Debug, 重新打开夜神模拟器菜单,点击 Stop Debugging。如果本篇文章对你有帮助的话,很高兴能够帮助上你。在 Chrome 浏览器打开。该功能需要使用到夜神模拟器。原创 2021-08-05 16:19:43 · 2418 阅读 · 0 评论 -
react native 无法连接夜神模拟器,可以连接android studio编辑器模拟器
再次进入Android SDK安装路径下的 platform-tools 文件夹,复制一份adb.exe文件,并重命名为 nox_adb.exe,最后将nox_adb.exe移动至夜神模拟器 bin 文件夹下并替换。当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。再次进入夜神模拟器安装路径下的 bin 文件夹,打开命令提示符,检查Android SDK的adb版本和夜神模拟器的adb版本是否一致。原创 2021-08-02 14:09:15 · 1557 阅读 · 2 评论 -
react typescript项目配置eslint+prettier
eslint-plugin-prettier 插件会调用prettier对你的代码风格进行检查,其原理是先使用 prettier 对你的代码进行格式化,然后与格式化之前的代码进行对比,如果出现了不一致,这个地方就会被 prettier 进行标记。当运行 ESLint 的时候检查一个文件的时候,它会首先尝试读取该文件的目录下的配置文件,然后再一级一级往上查找,将所找到的配置合并起来,作为当前被检查文件的配置。由于是 react 项目,所以还需要插件 eslint-plugin-react 来支持 .tsx。原创 2021-07-20 16:09:09 · 3890 阅读 · 0 评论 -
eslint 配置no-unused-vars规则,TypeScript接口抛出“ no-unused-vars”报错
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。这样就既可以使用no-unused-vars检测未使用变量的功能,也可以解决TypeScript接口抛出“ no-unused-vars”报错。将 “no-unused-vars” 替换成 “@typescript-eslint/no-unused-vars”如果本篇文章对你有帮助的话,很高兴能够帮助上你。type类型接口如下。原创 2021-05-24 15:31:28 · 10636 阅读 · 3 评论 -
react 新增自定义属性,通过typescript检测不爆红
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。鼠标划到 React 上边,可以看到一个提示:React是一个命名空间。namespace(命名空间) - 主要用于自定义声明属性的全局变量。如果本篇文章对你有帮助的话,很高兴能够帮助上你。本文基于:“react”: “^18.2.0”访问对象不存在属性,会报不存在属性的一个错误。给 react 增加一个自定义属性,也是一样。回到文件查看,已经通过检测了。原创 2021-05-12 14:05:55 · 1881 阅读 · 0 评论 -
react 打包优化,关闭打包生成的map文件
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。如果本篇文章对你有帮助的话,很高兴能够帮助上你。成功之后 在项目根目录会出现一个。原创 2021-01-05 15:31:45 · 2420 阅读 · 0 评论 -
react native android环境搭建,使用vscode和夜神模拟器进行开发(适用于0.67.4及以下版本)
变量值:java_jdk 安装地址(如果不知道,可以去C盘下找Program Files、Program Files (x86)这两个文件夹,会有一个java文件夹,里边就有jdk)当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。,来获得编译Android应用所需的工具和环境,比如Android Sdk (默认会安装最新版本的 Android Sdk),下载 1.8 版本,注意下载的是exe文件。原创 2020-11-02 10:32:14 · 4000 阅读 · 4 评论 -
react 使用.env文件管理全局变量
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。.env 变量名必须以 REACT_APP 开头,单词大写,以 _下划线分割。.env 文件默认是没有语法高亮的,vscode编辑器可以下载。启动项目后,在控制台查看 console.log 打印。如果本篇文章对你有帮助的话,很高兴能够帮助上你。.env 变量更改之后,项目必须重启才会生效。原创 2020-10-30 17:32:51 · 16803 阅读 · 11 评论 -
react 全局监听路由(浏览器url)变化
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。UNSAFE_componentWillReceiveProps 钩子函数同样被触发 ,可以看到路由改变触发执行了两次。三个对象传入 props 对象上,路径变化,属性就会变化,属性变化,就会触发。这个钩子,可以通过这个钩子监听路由的变化,监听整个项目的路由。如果本篇文章对你有帮助的话,很高兴能够帮助上你。不存在的路由同样能被监听到,手动修改为。原创 2020-08-12 15:35:34 · 10402 阅读 · 2 评论 -
react 打包优化,开启gzip压缩
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。打开 config 文件夹下的 webpack.config.js 文件。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?配置项,可以将gzip配置加在plugins的第一项。如果本篇文章对你有帮助的话,很高兴能够帮助上你。原创 2020-06-16 16:14:25 · 8104 阅读 · 8 评论 -
react 使用express实现简单的分页接口,以及服务端返回public文件夹里的图片方法
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。本文基于 react (“react”: “^16.13.1”) , express(“express”: “~4.16.1”,);使用,http://localhost: 端口号 就可以加载 public目录,后面直接跟上路径。如果本篇文章对你有帮助的话,很高兴能够帮助上你。有一定的express了解,并能写简单的接口。以下代码进行了前端代理配置。原创 2020-03-27 17:08:35 · 1159 阅读 · 1 评论 -
react 将express配置到react项目路径下启动,并配置为自动更新(热加载),并配置同时启动react项目以及express服务
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。至此配置热加载完成,以下为一条命令同时启动react项目以及express服务。express 默认是没有热加载的,每次更改接口都需要重新启动,不然不生效。,须根据自己项目express服务文件夹名称进行改写。express的服务启动命令为:npm start。如果本篇文章对你有帮助的话,很高兴能够帮助上你。node 更改成 nodemon。原创 2020-03-27 16:27:06 · 2396 阅读 · 1 评论 -
react 搭建express脚手架作为服务端
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react的默认启动端口号是3000,express的默认端口号也是3000,需要进行更改。示例使用 server 作为项目名,创建成功后会在根目录下生成一个 server 文件夹。需要特别注意的是: webpack配置进行改动后,都需要重新启动项目,不然不生效。express脚手架默认是没有依赖的,需自行安装。原创 2020-03-27 15:53:14 · 1097 阅读 · 1 评论 -
react axios配置代理(proxy),解决本地开发时的跨域问题
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。打开 config 文件夹下的 webpackDevServer.config.js 文件。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?如果本篇文章对你有帮助的话,很高兴能够帮助上你。参照如下格式,配置代理。原创 2020-03-27 15:01:00 · 8307 阅读 · 6 评论 -
react 配置文件路径别名alias
当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。打开 config 文件夹下的 webpack.config.js 文件。注意: webpack配置进行改动后,都需要重新启动项目,不然不生效。会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?配置项,添加自定义路径别名。原创 2020-03-27 14:28:27 · 6924 阅读 · 9 评论