RN：使用react-native-webview渲染h5页面、渲染html，并设置自适应高度

安装

yarn add react-native-webview

渲染h5

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyWeb extends Component {
  render() {
    return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: 'https://infinite.red' }}
        style={{ marginTop: 20 }}
      />
    </View>
    );
  }
}

渲染html

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';

class MyInlineWeb extends Component {
  render() {
    return (
    <View style={{ flex: 1 }}>
      <WebView
        originWhitelist={['*']}
        source={{ html: '<h1>Hello world</h1>' }}
      />
    </View>
    );
  }
}

获取web-view高度

上面可以看到，web view必须父元素设置 flex: 1，也就是设置高度，webview内容才能展示出来，我们如果webview底下还有别的元素，那么就得根据 webview 的内容来设置高度了。

我们要用到一个库 https://github.com/iou90/react-native-autoheight-webview

试了下网上其他方案都不太好使，这个库也一般，凑活用，大家有什么好的建议可以说一下

app h5通信

const INJECTED_JAVASCRIPT = `(function(){
 window.localStorage.setItem('x-u-token', '${status.token || ''}');
})();`;

<WebView
  scalesPageToFit={false}
  javaScriptEnabled={true}
  decelerationRate="normal"
  startInLoadingState={true}
  // 发送消息给h5
  injectedJavaScriptBeforeContentLoaded={INJECTED_JAVASCRIPT}
  source={{
    uri: url
  }}
  bounces={false}
  scrollEnabled={true}
  automaticallyAdjustContentInsets={true}
  // 接受h5的消息
  onMessage={(event) => {
    console.log('onMessage===', event.nativeEvent.data);
    const data = event && event.nativeEvent && event.nativeEvent.data;
    if (data) {
      const message = JSON.parse(data);
      if (message.needLogin) {
        certificate.showLoginDialog();
      }
    }
  }}
></WebView>

h5发消息给app

if (window.ReactNativeWebView) {
  window.ReactNativeWebView.postMessage(JSON.stringify({
    needLogin:true
  }));
} else {
  // 去登录
}

参考文档

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
全部API