The component uses the official React-native WebView component. API documentation. This section mainly introduces the application scenarios

The installation

$ npm install react-native-webview
Copy the code

Routine use of

As a general web page entry, pass in a URI link. Note the mixedContentMode parameter in the Android environment, which allows HTTP links to be loaded

<WebView ref={ref => (this.webview = ref)} source={{ uri: 'https://www.baidu.com/' }} style={{ flex: 1}} mixedContentMode="compatibility" // Android: WebView should allow secure link (HTTPS) pages to load the content of non-secure link (HTTP), />Copy the code

As a login entry scenario

For example, a toB app faces many customers, each of which has its own login system interface and requires access to its own login system.

At this time, it is necessary to conduct some “value interception” after the WebView access to the login interface to judge the login status. The onNavigationStateChange parameter of the WebView is used. This method calls back to changes in the navigation information of the web page in real time, as shown below

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

After the internal login, you can initiate a redirection. The front end pays attention to THE URL changes and determines the login status. At the same time, you can combine some login information fields in the REdirected URL for front-end login status verification, for example:

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

Functional module embedding

When webView is taken as the carrier of function modules, user interaction will be involved, and value transfer between RN and H5 will be required. React Native then needs to inject JS into the Web, and the Web can actively send back data to React Native.

The webview component provides injectedJavaScript used to inject js h5, using Windows in h5 relevant methods. ReactNativeWebView. PostMessage visible to active the callback, The react and H5 interaction can be completed by listening on the onMessage field of the WebView.

Sample code:

const injectJSStr = 'window.injectStr=' I am an injected field '; var div = document.getElementById('testID'); div.style.color='red'; div.style.fontSize='100px'; `;

const html = `     
      

       Hello Word
      
   `; . <View style={{flex: 1}} ><WebView
        source={{html}}
        injectedJavaScript={injectJSStr}
        onMessage={event= >{ alert(event.nativeEvent.data); }} / >
</View>
Copy the code

In the demo, the WebView uses hard-coded HTML, injectedJavaScript to actively inject a string of JS code, and the HTML actively returns the injected fields, using onMessage to listen for the returned content.

Note: When I do JS injection, I usually mount arguments or methods on the Window object. If H5 wants to expose methods for RN to call as js injections, it can also mount them on Windows.

Other scenarios

An extended business scenario from the previous example, such as one that wants to display rich text using a WebView, simply assigns a value to the Source field.

Code:DEMO

Run the demo

$ git clone https://github.com/lianglei777/demos.git
$ cd demos
$ git checkout RNFaceDemo
$ cd RNFaceDemo
$ npm install 
$ cd ios 
$ pod install
Copy the code

If pod install fails, refer to the Cocoapods section of this article.

If you have any questions please leave them in the comments section

  • React Native js and ios value transfer
  • React Native packs face detection and beauty components
  • React Native WebView usage scenarios