npm i react-native-webview

<WebView  ref={ (webView) => this.webView = webView }
          originWhitelist={ ['*'] }
          // 布爾值,指定WebView中是否啟用JavaScript。只在Android上使用，因?yàn)樵趇OS上默認(rèn)啟用了JavaScript。
          javaScriptEnabled={ true }
          // 布爾值,指定是否開啟DOM本地存儲
          domStorageEnabled={ true }
          // 允許文件上傳
          allowFileAccess={ true }
          // 在webView內(nèi)部網(wǎng)頁中，調(diào)用window.postMessage可以觸發(fā)此屬性對應(yīng)的函數(shù)，通過event.nativeEvent.data獲取接收到的數(shù)據(jù)，實(shí)現(xiàn)網(wǎng)頁和RN之間的數(shù)據(jù)傳遞
          onMessage={ this._onMessage }
          //初始化調(diào)用方法
          onLoad={() => { this.handleInjectJavascript();}} 
          // 加載時(shí)強(qiáng)制使用loading轉(zhuǎn)圈視圖，如果為true，webview可能會加載失敗，顯示為空白
          startInLoadingState={false}
          // webview加載錯(cuò)誤頁面
          renderError={this.renderErrorView}
          // 網(wǎng)絡(luò)路徑
          // 也可以為本地路徑 source={ {uri: 'http://192.168.1.1111:8080/'} }
          source={ {uri: 'http://www.baidu.com/'} } />

 //RN webview 向 vue發(fā)送數(shù)據(jù)
 handleInjectJavascript = (data) => {
     // 拼接數(shù)據(jù)為方法
     const injectJavascriptStr =  `(function() {
     	window.WebViewBridge.onMessage(${JSON.stringify(data)});
     })()`; 
     // 通過 injectJavaScript  將數(shù)據(jù)傳遞給WebView頁面，并立即執(zhí)行為js
     if(this.webView) {
     	this.webView.injectJavaScript(injectJavascriptStr)
     } 
 }

 mounted() {
    window.WebViewBridge = {
      onMessage: this._onMessage //在window上掛載一個(gè)onMessage方法，RN會調(diào)用
    }
    // 自定義事件后直接觸發(fā)：
    const event = new Event('WebViewBridge')
    window.dispatchEvent(event);
 },
 methods: {
    // 接收 RN 發(fā)送的消息
    _onMessage(data) {
      let that = this;
      console.log('data ------- ',JSON.stringify(data)); // 'hello world'
    }
  }

  mounted() {
    // 自定義事件后直接觸發(fā)：
    const event = new Event('WebViewBridge');
    window.dispatchEvent(event);
  },
  methods: {
    // 向rn發(fā)送消息, 將值 'hello world' 掛載到 postMessage 
    _postMessage('hello world') {
        window.ReactNativeWebView.postMessage(data);
    }
  }

onMessage={ this._onMessage }
 _onMessage = (event) => {
        console.log('接收vue發(fā)來的消息onMessage', event.nativeEvent.data); 
  }

  mounted() {
    window.WebViewBridge = {
      onMessage: this._onMessage,
      receiveMessage: this._receiveMessage //在window上掛載一個(gè)receiveMessage方法，RN自行調(diào)用
    }
    const event = new Event('WebViewBridge')
    window.dispatchEvent(event);
  },
  methods: {
    // 向rn發(fā)送消息
    _postMessage('wow,RN!!') {
        window.ReactNativeWebView.postMessage(data);   // 將值 'wow,RN!!' 掛載到 postMessage 
    },
    // 二次或多次接收RN發(fā)送消息
     _receiveMessage(data){
      let that = this;
      console.log('data receiveMessage-------  ',JSON.stringify(data));
     }
  }

onMessage={ this._onMessage }
 // 接受H5發(fā)送來的消息
 _onMessage = (event) => {
        console.log('接收H5發(fā)來的消息onMessage', event.nativeEvent.data); 
       
        const injectJavascriptStr =  `(function() {
 	   window.WebViewBridge.receiveMessage(${JSON.stringify('hello,vue2!!! ')});
        })()`;
        this.webView.injectJavaScript(injectJavascriptStr);
  }

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    WebView,
} from 'react-native'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <WebView
                  source={{uri: 'https://www.baidu.com'}}
                    domStorageEnabled={true}
                    javaScriptEnabled={true}
                    startInLoadingState={true}
                    automaticallyAdjustContentInsets={true}>
                </WebView>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
})

   { 
      "canGoBack": false,
      "canGoForward": false, 
      "loading": true,
      "navigationType": "other", 
      "target": 229, 
      "title": "", 
      "url": "https://www.baidu.com/"
   }

{ "url": "https://www.baidu.com ? sessionId=xxx & username= xxx" }

const injectJSStr = `
  window.injectStr='我是注入的字段';
  var div = document.getElementById('testID');
  div.style.color='red';
  div.style.fontSize='100px';
`;
const html = `
    <html>
    <head></head>
    <body>
      <script>
        setTimeout(function () {
          window.ReactNativeWebView.postMessage(window.injectStr)
        }, 2000)
      </script>
      <div id='testID'>Hello Word</div>
    </body>
    </html>
 `;
  ......
<View style={{flex: 1}}>
    <WebView
        source={{html}}
        injectedJavaScript={injectJSStr}
        onMessage={event => {
        alert(event.nativeEvent.data);
        }}
    />
</View>

import React, {Component} from 'react';
import {Text, StyleSheet, View, Button} from 'react-native';
import WebView from 'react-native-webview';
export default class App extends Component {
  state = {colorIndex: 0, tip: '原生的Text組件，等webview中的發(fā)送。。'};
  changeColor = () => {
    this.webview.reload();
    let colorIndex = this.state.colorIndex;
    colorIndex = ++colorIndex % 5;
    this.setState({colorIndex});
  };
  recieve = msg => {
    let data = msg.nativeEvent.data;
    let uname = JSON.parse(data).uname;
    this.setState({tip: uname});
  };
  render() {
    let colors = ['gray', 'yellow', 'red', 'antiquewhite', 'white'];
    let scriptStr = `document.body.style.backgroundColor='${
      colors[this.state.colorIndex]
    }'`;
    return (
      <View style={{flex: 1}}>
        <Button title="刷新WebView的背景色" onPress={this.changeColor} />
        <Text style={{fontSize: 30}}>{this.state.tip}</Text>
        <WebView
          onMessage={this.recieve}
          ref={ref => (this.webview = ref)}
          injectedJavaScript={scriptStr}
          source={{uri: 'http://192.168.180.241:8080/test.html'}}
        />
      </View>
    );
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="info" name="uname" value="John" />
    <br>
    <button class="info">發(fā)送給原生組件</button>
    <script>
        document.querySelector('button').addEventListener('click', () => {
            let uname = document.querySelector('input[name="uname"]').value
            let msg = JSON.stringify({
                uname
            })
            window.ReactNativeWebView.postMessage(msg)
        })
    </script>
</body>
</html>