ReactNative适配探讨

px(CSS pixels) : 逻辑像素，浏览器使用的抽象单位，多用于css样式单位，通常也是设计师使用的单位。

dp(device pixels) : 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt(以下为了清晰暂用dp代替)。pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于254厘米。

dpr(devicePixelRatio) : 设备像素缩放比。计算公式：dpr = dp/px；1px=dprdprdp(px是个正方形，长宽);

Reactnative中使用dp为单位

例：

iphone6宣称的分辨率是7501334，这里指的是物理像素，但是在模拟器上显示出来的却是宽375像素(CSS逻辑像素)，iphone6的375px667px就是因为它的dpr等于2。此时一个css像素就会占据四个物理像素的位置，在x轴方向占两个，在y轴方向占两个。

通常我们的设计师会以iphone6为设计稿，也就是375px667px进行设计，此时如果我们使用iphone6(375dp667dp)进行开发显示：

严谨的说在单一方向上，如水平方向 1px=1dp,375px=375dp(也是宽度满屏)

但如果我们在设备像素不等于(375dp667dp)的设备上，例如iphone6s Plus(414dp736dp)，

我们设置

至此，问题浮现，我需要一个适配转换方法，使设计稿上的375px就是满屏，显示到任意设备像素的屏幕上还是满屏。

方法原理：

虽然单位不同，但是元素所占屏幕宽度的比例是相同的

利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大或缩小）

公式如下：

设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）

我们要求的就是 元素的宽度（dp）

可以得出：

元素的宽度（dp,这是我们最后得到写到程序里的数值） = 设计稿元素宽度（px） 屏幕的总宽度（dp） / 设计稿总宽度（px）

放到ReactNative里实现

在确定了转换方法以后，我们只需在设置长度时调用转换方法即可

此处的异形屏多指刘海屏，水滴屏，异形屏的statusbar(也就是显示信号，电量的顶部行)的高度会比正常的屏幕要高一些。

ReactNative官方给了一个解决方法：

SafeAreaView 会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。

至此你的刘海屏的问题会得到解决,但是SafeAreaView只在ios生效，android还得使用StatusBar组件( >

题主是否想询问“reactnative卡死在failtocomfil怎么办”解决办法如下：

1、检查依赖项：请确保您的项目中的依赖项都已正确安装且正确引用。可以尝试将node_modules文件夹删除并重新运行npminstall重新安装依赖项。

2、重置缓存：尝试使用npmconfigsetcache-min9999999命令重置缓存，然后重新运行npminstall安装依赖项。

3、升级Nodejs和npm：请确保您的Nodejs和npm版本都是最新的，并尝试更新它们以查看是否可以解决问题。

4、使用yarn：尝试使用yarn代替npm，这有时可以解决依赖项问题。首先需要卸载npm，然后安装yarn，最后在项目根目录中运行yarninstall。

可用于flex布局使用

必须把文本节点放到Text中，否则会报错，Text组件内的子组件不支持flex布局

Android 是不支持 GIF 和 WebP 格式,你需要在android/app/buildgradle文件中根据需要手动添加

网络和 base64 数据的需要手动指定尺寸

在安卓中，如果使用大小远大于Image的会触发内存泄漏，只需要设置 Image 组件的 resizeMethod 属性为 resize 即可

提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等

能够配置出类似textarea、password，其他的多选、单选、下拉框等input类型需要引入第三方插件 >

Drawer is a panel that displays the app's navigation options on the left edge of the screen

在点击控件或者某个区域后，浮出一个气泡菜单来做更多的 *** 作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。

分隔长列表，每次只加载一个页面。

由至少 2 个分段控件组成，用作不同视图的显示；是 iOS 的推荐组件。

规则

用于让用户在不同的视图中进行切换。

位于 APP 底部，方便用户在不同功能模块之间进行快速切换。

点击后会触发一个 *** 作。

复选框

DatePickerView 的功能类似于 DatePicker ，但它是直接渲染在区域中，而不是d出窗口。

用于选择日期或者时间。

用于接受单行文本。

注意：只是选择器，一般用于上传前的文件选择 *** 作，但不包括上传的功能

权限相关的问题可以移步至： >

步骤参照官方网址即可

settingsgradle

buildgradle

MainApplication

AndroidMainifestxml

添加网络配置权限等

添加百度api key(非常重要) 不添加会只出现网格

1进入百度地图开放平台：

2进入API控制台

3创建应用

应用名称此处可随便写

发布版SHA1：

第1步：运行进入控制台(window+R)

第2步：定位到android文件夹下，输入cd android

第3步：输入keytool -list -v -keystore debugkeystore，会得到三种指纹证书，选取SHA1类型的证书（密钥口令是android），例如：

其中keytool为jdk自带工具；keystorefile为Android 签名证书文件

包名在AndroidMainifestxml中的 package:'包名'

OPPO软件权限的设置方法：

1、ColorOS 30系统，进入手机管家--权限隐私--应用权限管理--需要修改权限的应用进行修改；

2、ColorOS 21版本，安全中心--权限隐私--应用权限管理；

3、ColorOS 20版本，安全中心--权限管理--应用权限管理；

4、其他版本，设置--安全服务--个人信息安全。

以上就是关于ReactNative适配探讨全部的内容，包括:ReactNative适配探讨、react-native 真机调试的跨域问题、reactnative卡死在failtocomfile等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！