React Native 网络层分析 (2)

调试应用分别有各个操作系统的GUI安装版本。当然,如果习惯使用命令行,也可以使用NPM安装reactotron-cli
npm install -g reactotron-cli

reactotron设置

设置调试配置:

在你的React Native应用中安装reactotron-react-native

npm i --save-dev reactotron-react-native
然后,在你的应用的添加配置文件,定制调试内容:

```
import Reactotron, {
trackGlobalErrors,
openInEditor,
overlay,
asyncStorage,
networking
} from 'reactotron-react-native'
Reactotron
.configure({
name: 'xxx' // 调试的名称
})
.use(trackGlobalErrors()) // 设置监听全局错误
.use(openInEditor()) // 设置在编辑器中打开错误
.use(overlay()) // 设置图片遮盖图片(用于UI还原度对比)
.use(asyncStorage()) // 设置异步存储调试
.use(networking()) // 设置网络调试
.connect() // 连接应用(必须)

``然后在你的应用的入口文件中引入这个配置文件。然后重新启动应用。当然,还可以使用正则表达式过滤请求的contentType的类型和要忽略的请求的url`,见下面的配置:

.use(networking({ ignoreContentTypes: /^(image)\/.*$/i, // 设置reactotron要忽略的文件类型 ignoreUrls: /\/(logs|symbolicate)$/, // 设置reactotron要忽略的url请求路径 }))

reactotron设置


reactotron设置


reactotron结果

reactotron调试网络只是他的一个功能之一,其他还有很多强大的功能。有兴趣可以查看他的文档。

使用Chrome Developer Tools网络面板调试网络

React Native默认暴露出来的接口中,是没有直接在Chrome Developer Tools查看网络请求的方法的,查看 RN 源码 Libraries/Core/InitializeCore.js,注释中写着:

Sets an object’s property. If a property with the same name exists, this will
replace it but maintain its descriptor configuration. By default, the property
will replaced with a lazy getter.

The original property value will be preserved as original[PropertyName] so
that, if necessary, it can be restored. For example, if you want to route
network requests through DevTools (to trace them):

global.XMLHttpRequest = global.originalXMLHttpRequest;

@see https://github.com/facebook/react-native/issues/934

具体实现在XHRInterceptor.js中。原来的XMLHttpRequest被改写成了 originalXMLHttpRequest,所以要在Chrome 中显示network 只需要替换XMLHttpRequest 为 originalXMLHttpRequest。在入口文件处设置:

if (__DEV__) { GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest }

当然,这样有可能会产生CORS, Chrome 会限制跨域请求。这时要么后端配合一下去除限制,要么使用 Allow-Control-Allow-Origin: * 插件。

React Native发送二进制数据(binary data )

由于React Native中Fetch对象的底层采用的是XHR实现,这就限制了发送二进制数据的功能。当然React Native提供了一系列的方式来解决这个问题,比如: 转换二进制文件为base64字符串或者采用第三方库react-native-fetch-blob。但是并没有从底层解决这个问题。

转换二进制为base64发送

到目前为止,React Native不能发送非序列化的数据,所以,要发送二进制数据,采用Base64编码的字符串是个不错的选择。

banner

例如,你从服务器下载一张图片(注意:不是通过url从服务器获取),请求通过JavaScript线程,再通过React Native提供的桥接器,最后通过原生系统的网络模块发送到服务端。服务端返回一个Base64编码过的图片,JavaScript线程收到返回的字符串后,会分配相应的内存,然后React Native会调用相应的原生模块渲染成相应图片。但是值得主要的是,这种方式会造成典型的性能问题——内存泄漏。

通过Base64编码的方式传输二进制文件,这里会造成一系列性能问题,这篇文章中列出了大部分性能问题及提出了相应的解决方案。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdfpw.html