react项目的适配

Rocko 发布于2019-08-29 14:20 / 1909人阅读

摘要：创建的项目默认是不对外暴露配置信息的，所有的配置信息可以在下面看到。何为语法糖的使用二暴露配置在项目的中使用来恢复默认配置，需要注意的是，此命令是不可逆的。五总结以上就是项目的适配的相关操作，现在就可以在项目中愉快的实现我们的需求了。

利用create-react-app创建一个react项目 react-demo, 具体操作见： https://github.com/facebook/c...。
create-react-app创建的项目默认是不对外暴露配置信息的，所有的配置信息可以在node_modules/react-scripts下面看到。因此如果对原配置信息不满意，希望加上自定义配置，可以这么做：

一、技术背景

下面以实现淘宝的flexible布局+sass语法糖为例来进行操作。
何为flexible? https://github.com/amfe/artic...
sass语法糖的使用： http://www.ruanyifeng.com/blo...

二、暴露配置

在react-demo项目的package.json中使用npm run eject 来恢复默认配置，需要注意的是，此命令是不可逆的。此时会在根目录下生成我们需要的 config 和 public 两个配置文件夹。

三、准备包

要实现我们的需求，需要安装以下几个包：lib-flexible sass-loader node-sass postcss-px2rem

npm i lib-flexible --save 
npm i sass-loader node-sass --save-dev
npm i postcss-px2rem --save

四、开始配置

在 config/webpack.config.dev.js 下做如下配置：

2.同样在config/webpack.config.dev.js里也需要同样的配置，这里就不重复说明了。

3.在index.js中引入lib-flexible

3.还有一步需要做的，我在完成上面的适配和之前vue的适配后做对比后，发现二者在同样的页面下居然会有些许差异，找了半天才找到了破解之道。找到 public/index.html文件，并注释掉下面的的viewport代码。至于为什么，可以查看lib-flexible的源码。

五、总结
以上就是react项目的适配的相关操作，现在就可以在项目中愉快的实现我们的需求了。

服务器托管私有云怎么部署react项目 ios10的适配问题网络适配器的驱动程序好的项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113061.html

React Native移动开发实战-4-Android平台的适配

摘要：但是，想要进一步理解的适配，有必要先了解适配的一些基本概念屏幕尺寸屏幕尺寸是指手机屏幕对角线的英寸数。屏幕像素密度屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。打开Android开发工具Android Studio，选择菜单 Open an existing AndroidStudio project，打开ch04项目的android文件夹，如图5.8所示。 showImg(h...

yacheng 2019-06-25 11:32 评论0 收藏0
从项目中由浅入深的学习react (2)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章从项目中由浅入深的学习vue,微信小程序...

leap_frog 2019-08-23 16:42 评论0 收藏0
翻译 | 从 ReactJS 到 React-Native—两者的主要差异是什么？

摘要：跟非常相似，但是在开始尝试你第一个之前，也需要了解两者之间的一些差异。推荐的方式是使用提供的。能用到组件中的或者上以启用这个组件的触摸事件。华翔，Web前端开发工程师著作权归作者所有，转载请联系作者获得授权。 showImg(https://segmentfault.com/img/bVUliz?w=640&h=235); React-Native已经诞生有两年左右了，自从适配了An...

darkerXi 2019-08-21 12:05 评论0 收藏0
电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

fizz 2019-06-25 12:31 评论0 收藏0
电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

MockingBird 2019-08-23 14:08 评论0 收藏0