Question

所以我有点难以理解......我在我们的应用程序的一部分中使用WebView，WebView的原因是因为我们从一个API端点拉回来给我们返回一个HTML字符串。此HTML字符串中的字体大小和其他内容未设置为在移动应用程序中使用的样式，因此我们尝试为其添加一些样式更改以获得更好的可见性。我已经看到人们在html文件的顶部添加样式标签，以便为元素添加特定的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} />

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

以下是我点击一次时的视图：

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

如果您认为这有助于解释，我也有一个视频。我正试图以最好的方式复述它，我可以哈哈。

修改

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

Answer 1

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

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

我的解决方案来自（RN 0.47）WebView道具：

scalesPageToFit？：bool

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

我尝试将scalesPageToFit设置为false，然后，页面停止缩小：

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

唯一的问题是，这导致我的内容缩放比Android上的WebView容器大。要解决此问题，我只需根据平台条件设置scalesPageToFit道具：

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

对我来说就像一个魅力！

Answer 2

我使用了this link。之所以选择此解决方案而不是接受的答案，是因为我可以使用react native样式来设置html标签的样式，而不是在实际内容之前注入样式声明字符串。

const htmlStyles = { p: {fontFamily: 'Lato'} }
const htmlContent = <H1>My Html</H1>;

<HTML containerStyle={ {margin: 16} }
                html={ htmlContent } 
                tagsStyles={ htmlStyles } />

将CSS样式添加到React Native WebView

2 个答案: