反应原生 webview 限制答案

【问题标题】：react native webview limitations反应原生 webview 限制
【发布时间】：2018-03-15 21:25:00
【问题描述】：

我在 react native 中的 webview 有奇怪的问题。有些页面是用 reactjs 制作的，在 webview 中是看不到的

例如这段代码

 <WebView
          source={{uri: 'https://cassetterocks.github.io/react-infinite-scroller/demo/'}} 
          style={{marginTop: 20}}
        />

工作正常，页面出现在 web 视图中并且在应用程序中可见。但是当我把它改成这个时

 <WebView
          source={{uri: 'http://projects.wojtekmaj.pl/react-calendar/'}} 
          style={{marginTop: 20}}
        />

什么都不显示，只有白屏。

webview 有一些特殊的限制，或者有人知道这种行为的原因吗？谢谢

编辑：经过大量尝试后，我意识到问题不在于 react native，而在于 react js。基于这个配置，我在 react-js 中发现了几页

 "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2"
  }

他们在 webviews 中工作没有问题

但基于此配置的页面

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  }

有问题。但我不知道问题出在 react 版本还是 webpack 版本 :-(

最终编辑：问题可能出在 react 版本中，15.3.2 一切正常，16.2.0 webview 不显示任何内容

【问题讨论】：

标签： react-native webview

【解决方案1】：

UIWebView 具有困扰混合开发人员十年的各种限制。我不知道它会让你拔掉的所有头发的完整列表。恐怕这通常是一种打地鼠运动。这是一篇文章，它将指出一些陷阱...http://undefinedvalue.com/beware-lure-ios-uiwebview.html

在您使用谷歌搜索时，您可能会在 WKWebView 中看到对 Apple 修复这些问题的引用，但遗憾的是，这在 React Native github 问题中讨论了它自己的问题：https://github.com/facebook/react-native/issues/321

【讨论】：