react-native-webview HTML和RN通信 互传、接收数据（H5上传图片为例）

继React Native 0.60后React Native将自带的webview剔除，推荐使用react-native-webview

喜欢给个赞。蟹蟹~

功能：

通过H5的input type="file" 选择手机图片 上传到服务器 RN响应上传结果提示（成功 失败）

实现步骤：

1，WebView在H5加载完后（onLoad回调）向H5发送上传图片需要的字段，比如token id 等等

2，H5点击上传按钮 选择手机文件，如果选择的类型不是图片，向rn发送数据 1009（表示选择的不是图片类型），rn接收后判断状态码做出对应提示

3，如果选择的是图片，H5将选择的图片和来自RN的token id等字段 异步发送到服务器,

后台返回数据，H5将数据发送给RN RN通过H5发来的数据里面的code来判断是否上传成功，做出对应提示

HTML

    
    
    
    
    




    

        

            拍照
        
        

            上传
                
            

        


    

    
    

React Native

 {
   if (event.nativeEvent.data) {
       const res = JSON.parse(event.nativeEvent.data)
       //接收h5返回的1009状态码  rn做出对应的提示
      if (res === 1009) {
         Alert.alert('', "不支持此格式", res.msg,
             [
                 { text: '好的' },
             ], { cancelable: false })
      } else {
           if (res.code === 0) {
                ToastAndroid.show('图片上传成功', 4000);
                const newListDatas = listData
                newListDatas.imglist.unshift({ url: res.data.url })
                this.setState({
                     listData: newListDatas
                 })
             } else {
                  Alert.alert('上传失败', res.msg,
                      [
                           { text: '好的' },
                      ], { cancelable: false })
             }
           }
       }
    }}

    mediaPlaybackRequiresUserAction={false}
    onLoad={() => {
         var data = { token: store.getState().token, id: rwid }
          //h5加载完后 向H5发送一些上传图片需要的其它字段比如token  id等等
          this.refs.webView.postMessage(JSON.stringify(data));
     }}
    ref='webView'
    allowFileAccess={true}//是否允许访问系统文件
    startInLoadingState={true}
    scalesPageToFit={true}
    scrollEnabled={false}
    allowsInlineMediaPlayback={true}
    allowsFullscreenVideo={true}
    originWhitelist={['*']}
    style={{ width: width, height: 40, backgroundColor: "#ffffff", overflow: "hidden", }}
    source={{ uri: "file:///android_asset/upImageh5/new_file.html" }}
  />

版本号：

"react-native": "0.59.8",
"react-native-webview": "^5.8.0",

完结，喜欢给个赞。蟹蟹~