css - 将 CSS 样式添加到 React Native WebView

Question

所以我对此有点困惑......我在我们的应用程序的一部分中使用了 WebView，WebView 的原因是因为我们从返回给我们的 HTML 字符串的 API 端点中提取。此 HTML 字符串中的字体大小和其他内容的样式不是为了在移动应用程序中使用，因此我们正在尝试对其添加一些样式更改以提高可见性。我见过人们在 html 文件的顶部添加 Style Tags 以向元素添加特定的 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} />

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

这是我点击一次时的 View :

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

如果您觉得这有助于解释，我也有一段视频。我正在尽我所能复述它哈哈。

编辑:

我认为这可能只是与模拟器相关的问题？如果有人能说出一些智慧，那仍然很棒。我似乎无法在生产构建中重现此错误。

Answer 1

我最近遇到了同样的问题。它只发生在 iOS 上，而不是 Android。

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

我的解决方案来自 (RN 0.47) WebView Prop :

scalesPageToFit?: bool

Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. The default value is true.

我尝试将 scalesPageToFit 设置为 false，瞧，页面停止缩小:

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

唯一的问题是，这导致我的内容比 Android 上的 WebView 容器缩放得更大。要解决此问题，我只需根据平台有条件地设置 scalesPageToFit 属性:

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

对我来说就像一个魅力!