react native界面怎样获取activity传过来的参数

昨天玩了一会ReactNative，想用CNode社区的接口做个客户端，做到Topic详情页的时候发现不知道如何展示HTML内容。翻了一下ReactNative的文档没有找到合适的组件，WebView需要有URL才可以。代码放在这里：CNodeReactNativefb只是提供了一些基本的，所以玩native是需要oc和js都会的刚有时间又研究了一下，貌似ReactNative更新了WebView的API，可以传入一个HTML的属性直接渲染HTML内容

简单封装，根据自己的项目需求自己改动，例如设备的服务uuid，特征值uuid以及协议指令需要双方约定生成等，根据协议来取，官网文档链接： >

React Native 是 Facebook 推出并开源的跨平台移动应用开发框架，是 React 在原生移动应用平台的衍生产物，支持 iOS 和安卓两大平台。React Native 使用 Javascript 语言，类似于 HTML 的 JSX，以及 CSS 来开发移动应用，因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域，同时 React Native 也提供了接近原生应用的性能和体验。

MQTT 是一种基于发布/订阅模式的 轻量级物联网消息传输协议 ，可在严重受限的硬件设备和低带宽、高延迟的网络上实现稳定传输。它凭借简单易实现、支持 QoS、报文小等特点，占据了物联网协议的半壁江山。

本文主要介绍如何在 React Native 项目中使用 MQTT，实现客户端与服务器的连接、订阅、取消订阅、收发消息等功能。

这里以创建一个名为 RNMQTTDemo 的项目为例，开发环境为 macOS，应用平台为 iOS，具体过程参考 Setting up the development environment 。

项目创建完成后，在项目根目录环境下，执行以下命令安装所需依赖：

react_native_mqtt 是一个在 React Native 项目中使用的 MQTT 客户端模块，支持 iOS 和 Android。

这里使用 EMQ 提供的免费公共 MQTT 服务器，该服务基于 EMQ 的 MQTT 物联网云平台 创建。服务器接入信息如下：

完整的 RNMQTTDemo 项目地址： >

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组件( >

以上就是关于react native界面怎样获取activity传过来的参数全部的内容，包括:react native界面怎样获取activity传过来的参数、react-native 中蓝牙连接、下发数据、监听数据、如何在 React Native 项目中使用 MQTT等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！