React native 分辨率适配(px,dp)
React Native 中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了 PixelRatio :
设计师给你一个尺寸，比如100px*200px的View，按照下面的方式可实现设计还原：
这个时候，你或许会说，这也太麻烦了，每个有尺寸的地方我都得转么，能不能我直接用px写，当然可以，不过需要整体加个缩放系数：
这样处理后，在根节点内，你再也不用考虑dp的问题了，直接使用px即可。
不过此时还有另外一个问题，设计尺寸是死的，屏幕大小是活的，得考虑分辨率适配啊，那在不同的分辨率下如何正确的实现设计师的设计呢？
我们将使用一种游戏经常会用到得方案，fixedWidth/fixedHeight.
fixedWidth 模式是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变,简言之 宽度固定，高度自适应 。
fixedHeight 模式是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始高度不变，宽度可能会改变,简言之 高度固定，宽度自适应 。
具体如何应用呢，别急，一步步来。
先来看看如何得到屏幕的像素宽高：
假定我们的设计尺寸是
按照fixedWidth、fixedHeight的定义，我们计算下新的宽高：
这个winsize就是最终实际用来布局的屏幕尺寸,此时我们又会多了一个分辨率适配的缩放系数，还记得我们前一个我们添加的为了使用px的缩放系数么，我们在这里做一个整合：
在后续的开发中将不必再关注适配的问题，只需要按照设计师给的尺寸实现布局即可。
最后再附上一个工具类 Resolution.js：
How to use:
bg_day.jpg的尺寸是750*1500，上面的程序在所有的分辨率下图片都能正确显示。
这里有个demo： Github ，如果解决你的问题了，记得给我加星哦~~
另外：不同分辨率下背景图片尺寸如何选择，移步另一篇博文： 《分辨率适配的取值范围》
詹松奥美： 在真机或者模拟器上都是挺流畅的,但是react-native前期学习花费时间和精力会比较多,等真正学会的时候,使用react-native开始是极好的.
同德县17815702002： react - native 怎么设置字体 - ？
詹松奥美： 1 打开eclipse,找到window2 点击后在下拉菜单中找到preferences3 在左边的菜单栏中找到general,appearance在general展开后的第一行,点击展开appearance4 找到colors and fonts,点击这样就快找到我们要的了5 看到右边字体一列有很多的选项,我们只需要修改basic里面的6 点击展开Basic,最下面有 Text Font 这个选项,点击7 然后右边的Edit被激活了,点击Edit8 在这里我们把字体修改成我们想要的就OK了9 最后一路OK会到主界面?
同德县17815702002： react native里webview怎么设置高度自适应 - ？
詹松奥美： webview中右下角的缩放按钮能不能去掉settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webview加载的页面居中显示咱知道的几种方法 第一种方法:WebSettings settings = webView.getSettings(); settings....
同德县17815702002： react 开发移动端需要适配吗 - ？
詹松奥美： 不知道你的适配指的是哪方面,如果是react.js 做web的话,以前怎么写样式,怎么适配屏幕,适配浏览器react里面还是要,react只是改了渲染方式.如果是react native的话,安卓和ios80%可以通用,除了部分样式要改.对于有些js端无法实现的,可以分别在安卓和ios端用native实现.封装成react native组件就可以了.当然也有大量开源的组件可以选择
同德县17815702002： reactnative 和 react 的区别 - ？
詹松奥美： react适用于web端app,reactnative适用于手机端app,手机端app可以是混合模式的,也就是说可以使用web(使用react),但是性能上可能没有使用reactnative的app的性能好,但是学reactnative基础使先学react,可以说react 与reactnative既有交集,有没有交集,但是这些是趋势,可以学学
同德县17815702002： 如何评价 React Native - ？
詹松奥美： 先说结论:必有作为,但绝不会是一家独大,甚至很难成为主流.用过 React 会知道,React 的核心概念是「DOM Representation」,在开发者和 DOM 中间构建一个中间件,然后通过高效的算法来 diff 两次 Virtual DOM 渲染的差异,然后在最...
同德县17815702002： react native怎样调试 - ？
詹松奥美： 首先使用react native编写一个简单的应用,在碰到问题的时候,肯定需要对代码进行调试.目前react native支持在Chrome浏览器内进行调试.需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项.将应用设置为在模拟器中...
同德县17815702002： react native和html5相比哪个好 - ？
詹松奥美： html5现在还占优势的.1、开发方式 (1)代码结构: React Native更为合理,组件化程度高 (2)UI布局:Web布局灵活度 > React Native > Native (3)UI截面图:React Native使用的是原生组件,(4)路由/Navigation:React Native & Native更胜...
同德县17815702002： 如何配置React Native真机调试 - ？
詹松奥美： 修改URL地址:打开项目目录下的AppDelegate.m文件,修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址.选择设备:把手机插上数据线,连接到你的电脑,这时候就可以在调试设备里,看到你自己的设备.点击当前选中的模拟设备即可展示所有设备,如下图,然后选中你的真机
同德县17815702002： react native 适配安卓有难度么 - ？
詹松奥美： 1. 布局及样式,与其说适配的难度,不如说改变的程度.相对ios,android的布局方式还是比较丰富的,android开发同学也更多使用xml管理layout、theme、style... 切换为rn的css-layout后第一感觉就是:有点弱,有点怪.布局会复用css-layout(...
