向 React Native WebView 添加 CSS 样式

所以我对此有点困惑......我在应用程序的一部分中使用了 WebView，使用 WebView 的原因是因为我们从返回给我们 HTML 字符串的 API 端点拉取。此 HTML 字符串中的字体大小和其他内容的样式不是为了在移动应用程序中使用而设计的，因此我们尝试对其添加一些样式更改以提高可视性。我见过人们在 html 文件顶部添加样式标签，以向元素添加特定的 html 样式，除了每次我单击具有以下内容的屏幕时，WebView 的 HTML 中的字体大小呈现不同之外，一切都正常工作。其中包含WebView。

这是当前代码（样式+html+脚本）：

let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript

我还在调试器中控制台记录了该字符串，以确保它缝合良好，甚至创建了 index.html 并将确切的字符串粘贴到其中，以确保它正确显示在那里。

这是样式字符串：

let htmlStyle = `<style>
                        #height-calculator {
                          margin: 0;
                          padding: 0;
                        }
                        #height-calculator {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            margin: 0;
                            padding: 0;
                        }
                        body {
                          width:100%;
                        }
                        h2 {
                          font-size: 48px;
                        }
                        p {
                          font-size: 18px;
                        }
                        h3 {
                          font-size: 32px
                        }
                        img {
                          width:98%;
                        }
                        td {
                          display: block !important;
                          width: 95% !important;
                        }
                        img {
                          width:98%;
                        }
                        hr {
                          width: 98%;
                        }
                        ol li ol li ol li {
                          position: relative; right: 85px;
                        }
                        ul {
                          width: 98%,
                          margin-left: -25px;
                        }
                        li {
                          width: 98%;
                        }
                        .tabs {
                          display: none;
                        }
                        .tabs > li {
                          display: none;
                        }
                        .tabs-content {
                          padding: 0;
                          list-style-type: none;
                        }
                        tr {
                          display: flex;
                          flex-direction: column;
                        }
               </style>`

最后是 WebView：

<WebView
  javaScriptEnabled={true}
  onNavigationStateChange={this.onNavigationStateChange.bind(this)}
  scrollEnabled={false}
  source={{html: rawHTML}}
  style={{height: Number(this.state.height)}}
  domStorageEnabled={true}
  scalesPageToFit={true}
  decelerationRate="normal"
  javaScriptEnabledAndroid={true} />

另外，正如我提到的，应用的所有其他样式都有效，主要是字体大小是超级不可预测的。

这是我单击一次时的视图：

然后我不更改或退出应用程序，我只是返回，然后单击相同的按钮进入相同的显示，有时我会得到这个（有时需要多次单击......这是非常不可预测的）：

我也有一个视频，如果你觉得这对解释有帮助的话。我正在尽力重述它，哈哈。

Edit:

我认为这可能只是与模拟器相关的问题？如果有人能对此发表一些智慧，那就太棒了。我似乎无法在生产版本中重现此错误。

我最近遇到了同样的问题。我只在 iOS 上遇到过这种情况，在 Android 上没有。

最奇怪的部分是复制的不一致。我找不到任何模式来说明 WebView 内容的大小何时会有所不同。相同的 HTML 会导致字体大小有时正常，但有时又非常小。

我的解决方案来自（RN 0.47）WebView https://facebook.github.io/react-native/docs/webview.html prop:

缩放页面适合？：bool

控制是否缩放 Web 内容以适合视图并允许用户更改比例的布尔值。默认值为true.

我尝试设置scalesPageToFit to false，瞧，页面停止缩小了：

<WebView
  source={{ html: myHtml }}
  scalesPageToFit={false}
/>

唯一的问题是，这导致我的内容缩放得比 Android 上的 WebView 容器更大。为了解决这个问题，我只需设置scalesPageToFit根据平台有条件地支持：

<WebView
  source={{ html: myHtml }}
  scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>

对我来说就像一个魅力！