rn webview ajax请求,最新 RN 实战系列之 webview 一种坑

原标题：最新 RN 实战系列之 webview 一种坑

之前我们也发过 RN 相关的文章《 RN 实战之后再谈混合开发 》

我们最近的一个 app 采用了 0.61.4 的 react-native，虽然官方在 11-23 发了一个最新的 0.61.5，0.62 也开始 rc，但市面上 0.61.4 的文章应该不多。

因为也是有一些现成的 h5 页面，所以我们还是采用了 react-native-webview 来加载网页。

import{ WebView } from'react-native-webview'

官方也给了一个提示：

用的是 https://github.com/react-native-community/react-native-webvie

Warning Please usethe

react- native-community/react- native-webview fork

ofthis component instead.

Toreduce the surface area ofReact Native,

isgoing tobe removed fromthe React Nativecore.

Formore information, please readThe Slimmening proposal.

好，先说说遇到的问题

第一个：h5 动态设置标题?

比如我们通过后端接口返回的字段来设置标题，设置的方式：

document.title = **

这样的方式是 不会生效的，所以我们需要通过 h5 来传递信息给 RN。

h5 这边需要如何做呢？

注意不是 window.postMessage

window.ReactNativeWebView.postMessage

这里传递的参数注意：

只支持 一个参数，而且是一个 string类型

window.ReactNativeWebView.postMessage

onlyacceptsoneargumentwhichmustbeastring.

具体可以参考：

https://github.com/react-native-community/react-native-webview/issues/809

在 RN 上：

通过属性 onMessage来监听 h5 传递的数据

里面是 nativeEvent.data来接收

onMessage={ event=> {

console.log( event.nativeEvent.data);

}

>

这里我们就可以通过它：

来做动态 title 的设置，h5 把 title 当成字符串传递过去，然后在 onMessage 里面处理：

onMessage={ event=>{

console.log(event.nativeEvent.data);

vartitle = event.nativeEvent.data;

// 然后设置 title

}

>

< /WebView>

问题来了，这个 title 是哪里的呢？

用到了工具包：

react-navigation

直接调用 setParams：

this.props.navigation.setParams({

title: title

})

当然如果你对 RN 熟悉的化，其实还可以设置自定义 key，然后在

静态 navigationOptions 里面定义 title 的值获取方式变一下：

通过 navigation.getParam

staticnavigationOptions = ( {navigation}) =>{

return{

title: navigation.getParam( '**')

}

}

webpackJsonp is undefined?

webpack 里面是如何读写文件的？

copy-webpack-plugin 的实现原理剖析 返回搜狐，查看更多

责任编辑：