最近我司有一个app是用rn写的，其中有个支付是通过后端配置好的链接跳到微信进行支付，之后重定向到服务器上的回调页面（H5）， 采用了rn的webview进行html加载，进行支付操作时总是提示
文档中是这么说的， ”1. 当前调起H5支付的referer为空导致，一般是因为直接访问页面调起H5支付， 请按正常流程进行页面跳转后发起支付，或自行抓包确认referer值是否为空 2. 如果是APP里调起H5支付，需要在webview中手动设置referer，如( Map extraHeaders = new HashMap(); extraHeaders.put("Referer", "商户申请H5时提交的授权域名");//例如 www.baidu.com ))“
看了之后只知道需要设置referer，但是如何在rn中的webview设置referer呢？ 如下：
<WebView
style={{ width: '100%', height: '100%' }}
source={{
uri: payUrl, //跳转链接
headers: {
Referer: 'http://www.baidu.com', // 此处设置
},
}}
/>
然后就可以正常进行页面跳转，之后就是当我支付完成或者取消支付后会有一个回调页面，也就是我们的H5页面，这个页面我是放在公司服务器上的， 主要包含三个操作，支付完成，重新支付和返回的按钮，也就是说，我需要将这三个按钮对应的参数传到Rn上，然后我再根据用户点击的按钮，拿到 对应的参数再进行不同的操作， h5三个按钮的代码如下：
/*
*
@ params '0' 支付失败 '1' 支付成功 '2' 返回
*/
document.querySelector('.successBtn').addEventListener('click', () => {
window.ReactNativeWebView.postMessage('1')
})
document.querySelector('.errorBtn').addEventListener('click', () => {
window.ReactNativeWebView.postMessage('0')
})
document.querySelector('.gobackStyle').addEventListener('click', () => {
window.ReactNativeWebView.postMessage('2')
})
这边携带的参数是有类型限制的，只能传一个string类型的 之后，我们就可以拿到传递过来的参数了，rn获取h5的参数方法如下：
<WebView
style={{ width: '100%', height: '100%' }}
source={{
uri: payUrl, //跳转链接
headers: {
Referer: 'http://www.baidu.com', // 此处设置
},
}}
onMessage={(event) => {
// 此处可以拿到我从h5传过来的参数
console.log('====>' + event.nativeEvent.data)
}}
/>
然后，，，就没了，剩下的就是根据用户的操作来进行订单是否支付成功的查询了，还有许多细节需要自己处理，例如页面加载不出来对应的处理， 因为会调起微信支付，当没有安装微信时的操作等等
