适配 react web

前端之家收集整理的这篇文章主要介绍了适配 react web前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
适配 react web 版
  • 参考。建议以参考英文为主,中文用来加深理解。因为他更新英文比较及时。
  • 安装
    • 全局安装react-web命令程序 npm install react-web-cli -g
    • 在工程的上一层目录执行 react-web init <ProjectName>
    • 提示已经存在目录,输入 yes ,继续安装执行
    • 进入工程目录,安装 react-dom,npm install react-dom --save
    • 进入工程目录,安装 react-web,npm install react-web --save
    • 本地图片的加载处理。安装file-loader : npm install --save file-loader
    • 在 web/webpack.config.js 文件里面,加入
      • {
        test:/\.(eot|otf|svg|ttf|woff|woff2|png|jpg|gif)\w*/,
        loader:'file'
        }

  • 运行
    • npm start
    • react-web start
    • 此时会去打包,打包生成在 web/output 下面,如果没有生成该目录,终端上肯定会显示一些错误解决这些错误之后才可以
    • web/output 下生成成功之后,就可以在浏览器里面输入 localhost:3000 进行访问了。
  • 适配
    • 图片尺寸。因为web pack 不能打包 xxx@3x.png图片。处理方案
      • 1. 做一个 图片批量生成工具,遍历工作目录下的 @3x 图片,如果有,就给他生成 普通的图片,名字也记录下来,一打包完毕,就给他删除掉。缺点是图片模糊。
      • 2. 代码里面做修改,所有 require 的路径,在 require 之前,都调用一个转换函数,如果是 web ,转换成带有 @3x 的图片。缺点是尺寸会被放大。比原生版本大3倍。
      • 3. ios,android,web 全部统一用一种资源,不要用 @3x 的图片,如果 @3x 图片尺寸是 120*120 ,我们代码引用的图片也用 120*120,但是名字不带 @3x ,代码里面指定 Image 组件的宽高为 40*40
原文链接:https://www.f2er.com/react/306611.html

猜你在找的React相关文章