React Native WebView 开发中的各种问题

 1.WebView 嵌入 html 代码时乱码,  在后面加 baseUrl: ''

<WebView source ={{html:"<h1> html </h1>", baseUrl: ''}}></WebView>

2.浏览器返回上一页

//定义 canGoBack
constructor(props){
  super(props);
  this.state = {
    canGoBack: false
  }
}

//添加ref属性
//onNavigationStateChange 当导航状态发生变化的时候调用,回调接收一个参数,里面包含了canGoBack
<WebView 
  ref={(browser)=>{this.browser=browser}} 
  onNavigationStateChange={this._onNavigationStateChange}>
</WebView>

//返回上一页方法,有上一页时调用此方法就行
onBackHandler = ()=>{
  if(this.state.canGoBack){
    this.browser.goBack();
  }
}

//当WebView导航状态发生变化的时候调用,将 navState.canGoBack 保存
_onNavigationStateChange = (navState) => {
  this.setState({
    canGoBack: navState.canGoBack
  });
}

3.ScrollView嵌套WebView 滚动条问题(ScrollView 和 WebView 都自带滚动条, 嵌套后ScrollView的滚动条无效)

 3.1 使用WebView的属性 injectedJavaScript 注入脚本代码, 通过 window.postMessage 向上派发Event

const injectedJavaScript = `
(function () {
  var height = null;
  function changeHeight() {
    if (document.body.scrollHeight != height) {
      height = document.body.scrollHeight;
      if (window.postMessage) {
        window.postMessage(JSON.stringify({
          type: 'setHeight',
          data: height,
        }))
      }
    }
  }
  setInterval(changeHeight, 100);
}());`;

 3.2 使用WebView的属性 onMessage 接收 window.postMessage 发送的data,实现网页和RN之间的数据交换,得到height后设置给WebView

onMessageActions = {
  setHeight: (height) => {
    if (height > 0) {
      this.setState({ height });
    }
  },
};

render() {
  return (
    <ScrollView style={{ flex: 1 }}>
      <Text>头部</Text>
      <WebView 
        source ={{ uri: 'https://www.baidu.com' }}
        style={{height: this.state.height,width:Dimensions.get('window').width}} 
        injectedJavaScript={injectedJavaScript}
        onMessage={(event) => {
          try {
            const action = JSON.parse(event.nativeEvent.data);
            const { type, data } = action;
            //hasOwnProperty 判断对象是否包含特定的自身(非继承)属性
            if (this.onMessageActions.hasOwnProperty(type)) {
              this.onMessageActions[type](data);
            }
          } catch (error) {
            console.log(error);
          }  
        }}></WebView>
    </ScrollView>
  );
}

 3.3 WebView 图片过大问题(上述已经解决了滚动冲突问题,  但是如果WebView嵌入html代码, html里面的图片宽度超过了手机宽度,那么WebView的高度会很高~很高~~~底部会有一大~~~片空白)

把 injectedJavaScript 代码修改一下 给所有图片添加最大宽度限制

const injectedJavaScript = `
(function () {
  var height = null;
  for(i=0; i < document.images.length; i++){
    document.images[i].style['max-width'] = ${Dimensions.get("window").width-20};
  }
  function changeHeight() {
    if (document.body.scrollHeight != height) {
      height = document.body.scrollHeight;
      if (window.postMessage) {
        window.postMessage(JSON.stringify({
          type: 'setHeight',
          data: height,
        }))
      }
    }
  }
  setInterval(changeHeight, 100);
}());`;