ReactNative进阶（十）：WebView 应用详解_react native webview(2)

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

二、WebView 使用样例

2.1 通过 url 地址加载网页

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Dimensions,
    Text,
    View,
    WebView
} from 'react-native';
 
//获取设备的宽度和高度
var {
    height: deviceHeight,
    width: deviceWidth
} = Dimensions.get('window');
 
//默认应用的容器组件
class App extends Component {
    //渲染
    render() {
        return (
            <View style={styles.container}>
              <WebView bounces={false}
                scalesPageToFit={true}
                source={{uri:"https://shq5785.blog.csdn.net/",method: 'GET'}}
                style={{width:deviceWidth, height:deviceHeight}}>
              </WebView>
            </View>
        );
    }
}
 
//样式定义
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop:20
    }
});
 
AppRegistry.registerComponent('HelloWorld', () => App);

2.2 加载 html 代码

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Dimensions,
    Text,
    View,
    WebView
} from 'react-native';
 
//获取设备的宽度和高度
var {
    height: deviceHeight,
    width: deviceWidth
} = Dimensions.get('window');
 
//默认应用的容器组件
class App extends Component {
  //渲染
  render() {
   return (
       <View style={styles.container}>
         <WebView bounces={false}
           scalesPageToFit={true}
           source={{html:"<h1 style='color:#ff0000'>欢迎访问 https://shq5785.blog.csdn.net/</h1>"}}
           style={{width:deviceWidth, height:deviceHeight}}>
         </WebView>
       </View>
   );
  }
}
 
//样式定义
const styles = StyleSheet.create({
  container: {
      flex: 1,
      paddingTop:20
  }
});
 
AppRegistry.registerComponent('HelloWorld', () => App);

2.3 RN -> HTML5 通信

当WebView加载html时，可实现html和rn之间的通信。rn向html发送数据可以通过postMessage函数实现。如下：

RN

 <WebView
    ref={(view) => (this.webView = view)}
    useWebKit={false}
    onLoad={() => {
      let data = {
        name: userInfo.usrName
      };
      this.webView.postMessage(JSON.stringify(data));
    }}
    onError={(event) => {
      console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);
    }}
    onMessage={(event) => {
      this.\_onH5Message(event);
    }}
    automaticallyAdjustContentInsets={false}
    contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
    onScroll={(event) => this.\_onScroll(event)}
    style={styles.webview}
    source={this.html ? { html: this.html } : { uri: this.url }}
    bounces={false}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
  />

html

// 在html中注册事件接收rn发过来的数据并显示在html中
document.addEventListener('message', function listener(RnData) {
  messagesReceivedFromReactNative += 1;
  document.getElementsByTagName('p')[0].innerHTML =
    '从React Native接收的消息: ' + messagesReceivedFromReactNative;
  document.getElementsByTagName('p')[1].innerHTML = RnData.data;
  // 获取接收后的数据后，及时清除监听器
  document.removeEventListener('message', listener)
});

在html中定义一个按钮，并添加事件向rn发送数据：

//window.postMessage向rn发送数据
document.getElementsByTagName('button')[0].addEventListener('click', function() {
  window.postMessage('这是html发送到RN的消息');
});

当html中调用了window.postMessage函数后，WebView的onMessage函数将会被回调，用来处理html向rn发送的数据,可以通过e.nativeEvent.data获取发送过来的数据。

// 接收HTML发出的数据
_onH5Message = (e) => {
  this.setState({
      messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
      message: e.nativeEvent.data,
  })
  Alert.alert(e.nativeEvent.data)
}

2.4 HTML5(Vue) -> RN 通信

HTML5

const message = {
 flag: 'previewIamge'
 filePath: filePath
}
window.ReactNativeWebView.postMessage(Json.stringify(message))

RN
还是通过WebView提供的onMessage 属性完成回调。

 <WebView
    ref={(view) => (this.webView = view)}
    useWebKit={false}
    onLoad={() => {
      let data = {
        name: userInfo.usrName
      };
      this.webView.postMessage(JSON.stringify(data));
    }}
    onError={(event) => {
      console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);
    }}
    onMessage={(event) => {
      this.\_onH5Message(event);
    }}
    automaticallyAdjustContentInsets={false}
    contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
    onScroll={(event) => this.\_onScroll(event)}
    style={styles.webview}
    source={this.html ? { html: this.html } : { uri: this.url }}
    bounces={false}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
  />

回调函数_onH5Message()实现逻辑如下：

// 接收HTML发出的数据
_onH5Message = (e) => {
  this.setState({
      messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
      message: e.nativeEvent.data,
  })
  Alert.alert(e.nativeEvent.data)
}

#### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。