将CSS样式添加到React Native WebView
Tay*_*ing 7 css webview reactjs react-native
所以我有点难以理解......我在我们的应用程序的一部分中使用了WebView,WebView的原因是因为我们从一个API端点撤回,它返回给我们一个HTML字符串.此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} />
另外,正如我所提到的,所有其他应用的样式都在工作,它主要只是字体大小超级不可预测.
这是我点击一次时的视图:
然后我不改变或退出应用程序,我只是回去,然后单击相同的按钮进入相同的显示,我有时会得到这个(它有时需要多次点击......这是非常不可预测的):
我也有一个视频,如果你觉得这有助于这个解释.我正试图以最好的方式复述它,我可以哈哈.
编辑:
我认为这可能只是模拟器相关的问题？如果有人能说出一些智慧,那将是非常棒的.我似乎无法在生产版本上重现此错误.
小智 10
我最近遇到了同样的问题.它只发生在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}
/>
对我来说就像一个魅力!
小智 5
我用过这个链接。我选择这个解决方案而不是接受的答案的原因是因为我可以使用 react native 样式来设置 html 标签的样式，而不是在实际内容之前注入样式声明字符串。
const htmlStyles = { p: {fontFamily: 'Lato'} }
const htmlContent = <H1>My Html</H1>;
<HTML containerStyle={ {margin: 16} }
html={ htmlContent }
tagsStyles={ htmlStyles } />
| 归档时间： |
|
| 查看次数： |
11298 次 |
| 最近记录： |