The original link: mrzhang123. Making. IO / 2017/12/20 /…

The React Native Version: 0.51

RN added WebView function in version 0.37, so to use WebView, the version must be >=0.37, and the message sent can only be a string, so it is necessary to convert data in other formats into strings, and then convert back after receiving them. Use json. stringify and json. parse directly

Load the HTML

The source attribute is used to specify the HTML to load, either online or local, as follows:

// Load the online page
<Webview
	source={{uri: 'http://www.mi.com'}} / >// Load the local HTML file
<WebView
	source={require('.. /src/html/index.html')} / >/ / or
<WebView
	source={{uri: 'file:///android_asset/baiduMap/index.html'}}
	onMessage={e => this.handleMessage(e)}
	automaticallyAdjustContentInsets={false}
	startInLoadingState
/>
Copy the code

Note ⚠ ️

Although you can use the require loading local HTML can also use the uri: ‘file:///android_asset/baiduMap/index.html’ form, but in actual development found that after using the require in the bundled with cannot be loaded into. So put the HTML in assets and use the file path to load it:

  1. Place the HTML file inandroid/app/src/main/assets
  2. Load HTML, that issource={{uri: 'file:///android_asset/baiduMap/index.html'}}

WebView and HTML communication

The WebView sends information to the HTML

The WebView uses postMessage to send information to HTML, and the HTML needs to listen for message event when receiving information from RN. The code is as follows:

// RN
class WebViewExample extends Component {
  onLoadEnd = (a)= > {
    this.refs.webview.postMessage = 'this is RN msg'
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('./html/index.html')}
        onLoadEnd={this.onLoadEnd}
      />
    )
  }
}
export default WebViewExample
// web
window.document.addEventListener('message', function(e) {
  const message = e.data
})
Copy the code

There’s a caveat here

PostMessage needs to be posted after the webView is loaded. If it is placed in commponentWillMount, the message will be posted before the page is loaded. As a result, the HTML side cannot listen to the Message event.

HTML sends information to the WebView

// RN
class WebViewExample extends Component {
  handleMessage = e= > {
    const message = e.nativeEvent.data
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('./html/index.html')}
        onMessage={e= > this.handleMessage(e)}
      />
    )
  }
}
export default WebViewExample

// web
window.postMessage('this is html msg')
Copy the code

debug

The Debug WebView in RN looks similar to that in Android development. After connecting to the device, enter it in Chrome

chrome://inspect
Copy the code

Click Inspect to open a debug page and debug. RN seems to have debug enabled by default, so you can directly see the output information in the WebView.

But I found that the debugging interface I opened is a confused interface, DO not know why, helpless.

Note ⚠ ️

Note that due to the differences in Android versions, the internal WebView supports different levels of JS. In order to ensure compatibility, if ES6 is used, please switch to ES5, otherwise an error will be reported.