将CSS样式添加到React Native WebView [英] Adding CSS styling to React Native WebView
问题描述
因此，我对此感到有些困惑……我在应用程序的一部分中使用了WebView，之所以使用WebView，是因为我们从API端点中提取了返回给我们的HTML字符串。此HTML字符串中的字体大小和其他内容并不是为了在移动应用中使用而设计的，因此，我们正在尝试对其进行一些样式上的更改以提高可见度。我见过人们在html文件的顶部添加样式标签以向元素添加特定的html样式，并且通常一切正常，除了WebView HTML的字体大小每次单击屏幕时都会呈现不同的效果。
So I am a bit stumped on this ... I'm using a WebView in a portion of our app, the reason for the WebView is because we are pulling from an API endpoint that returns to us an HTML string. The font size and other things in this HTML string aren't styled for the purpose of using in a mobile app so we are trying to add some stylistic changes to it for better viewability. I've seen people add Style Tags at the top of the html file to add specific html styles to the element, and everything is generally working except the font size in the HTML of WebView renders differently every time I click into the screen that has the WebView contained in it.
这是当前代码（样式+ html +脚本）：
Here is the current code (style + html + script):
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并粘贴在其中的确切字符串，以确保它正确显示在此处。
I have also console logged this string out in the debugger to make sure it's stitched well, and have even created and index.html and pasted in there the exact string, to make sure it's just showing up properly there.
以下是样式字符串：
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 ：
And finally here is the 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} />
此外，正如我提到的所有其他样式都可以使用，主要是字体大小超级变幻莫测。
Also, as I mentioned all the other styles applied are working, it's mainly just the font size that is super unpredictable.
这是我单击一次的视图：
Here is the view when I click it one time:
然后我不更改或退出应用程序，只是返回，然后单击相同的按钮以输入相同的显示，有时（有时需要多次点击...这是很难预测的）：
And then I don't change or exit the app, I just go back, and then click the same button to enter that same display and I get this sometimes (it sometimes takes multiple clicks ... it's very unpredictable):
我也有一个有关此的视频，如果您认为这有助于解释。我正尽力复述。
I have a video of this as well, if you feel that would help this explanation. I'm trying to retell it the best I can haha.
编辑：
我认为这可能是仅与模拟器相关的问题？如果有人能对此说一些智慧，那还是很棒的。我似乎无法在生产版本中重现此错误。
I think this might be a simulator only related issue? If anyone could speak some wisdom into that, that would be awesome still. I can't seem to reproduce this error on production build.
推荐答案
我最近遇到了同样的问题。
I recently experienced the same issue. It was only occurring for me on iOS, not Android.
最奇怪的部分是复制中的不一致。当WebView内容的大小不同时，我找不到任何模式。完全相同的HTML有时会导致字体大小正常，但有时却很小。
The weirdest part is the inconsistency in replication. I couldn't find any pattern to when the WebView content would be sized differently. Identical HTML would result in font size that was sometimes normal, but other times very tiny.
我的解决方案来自（RN 0.47） WebView 道具：
My solution came from a (RN 0.47) WebView prop:
scalesPageToFit ?:
bool
布尔值，用于控制是否缩放Web内容以适合视图并启用用户更改比例。默认值为 true 。
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 ，瞧，页面停止按比例缩小：
I tried setting scalesPageToFit to false, and voilà, the page stopped scaling down:
<WebView
source={{ html: myHtml }}
scalesPageToFit={false}
/>
唯一的问题是，这导致我的内容缩放为大于Android上WebView容器的缩放比例。要解决此问题，我只需根据平台有条件地设置 scalesPageToFit 道具：
The only problem is that this caused my content to be scaled larger than the WebView's container on Android. To fix this, I simply set the scalesPageToFit prop conditionally, based on platform:
<WebView
source={{ html: myHtml }}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
对我来说就像一个魅力！
Worked like a charm for me!
这篇关于将CSS样式添加到React Native WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
