react.js - react-native中WebView的问题

问题描述

问 题

react-native中WebView布局的一个问题

假设WebView有两种方式：

1. 直接用网址

2. 用异步请求得到的html字符串渲染。

1、最简单的布局：只有一个WebView

如果整个页面只有一个WebView的话，那么由于WebView本身带有滚动效果，所以当加载的数据超过页面显示的范围时，可以通过上下滑动来查看。

这种情况下没有什么问题。

2、其它布局A+WebView

这种情况下，假设布局A定义在WebView的前面，能不能实现仍然是让它们看起来像是一个页面那样子滚动？

3、其它布局B+WebView

这种情况下，假设布局B定义在WebView的后面，能不能实现仍然是让它们看起来像是一个页面那样子滚动？

各位大神，怎么解决这样的问题啊？

<ScrollView>
  <View></View>
  <WebView/>
</ScrollView>

按照这个格式来写，发现不行。有什么样式要设置的吗？

或者有没有一些demo给我参考一下？

解决方案

我是在页面里面嵌入了js脚本来实现的，在外面套一个 ScrollView 大概想下面这个样子

<ScrollView>
<View></View>
<WebView/>
</ScrollView>

然后为了解决 WebView 的高度问题，在 WebView 使用了 injectedJavaScript 属性，配合 js 脚本和 onMessage 实现实时调整高度，组件渲染大致是下面这个样子。

<WebView
  automaticallyAdjustContentInsets={false}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  onMessage={this.onMessage}
  style={[style, { height: this.state.height }]}
  injectedJavaScript={injectScript}
  source={source}
/>

然后写一段 injectScript

const injectScript = `
// 解决外部高度显示不正确的问题
(function () {
  var height = null;

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

再写一个 onMessage 函数

/**
 * web端发送过来的交互消息
 * @param data 消息内容，为 string 格式的 json
 */
onMessage(event) {
  try {
    const action = JSON.parse(event.nativeEvent.data);
    if (action.type === 'setHeight' && action.height > 0) {
      this.setState({ height: action.height });
    }
  } catch (error) {
    // pass
  }
}

这篇关于react.js - react-native中WebView的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！