当我把下面的CSS代码作为我的web视图的源代码的头时，web视图什么都不显示。我做了一些测试。有时，如果我从另一个文件中删除所有带有常量的属性(如果我删除${theme.----})并用"红色"替换它们，用"#ffffff"替换它是不起作用的。我不明白为什么webview不能处理十六进制颜色值。我用react native ^2^3和^5尝试过，但都不起作用。我的代码以前工作得很好，以前在头脑中处理样式，但现在还找不到发生了什么变化。
import theme from './../../constants/theme';
CSS:`
<head>
<style>
body{
padding-left:2%;
width:92%;
background-color: ${theme.background.primary};
color:${theme.text.primary};
text-overflow: ellipsis;
font-size: 1.05em;
}
img{
height:auto;
max-width: 100%;
box-shadow: 0px 0px 6px 1px ${theme.background.primaryVariant};
}
iframe{
height:auto;
max-width:100%;
}
a{
display: inline-block;
color: ${themeDark.tertiary};
}
p{
margin-top:0.2em;
margin-bottom:0.2em;
}
</style>
</head>`
我的网络视图：
var page = `<!DOCTYPE html><html><head><meta charset="utf-8"/>
`+css+`
</head>
<body>`+body+script;
{this.state.isLoadingWebview ? <ActivityIndicator size="large"/> : null}
<View style={{flex:1,opacity:this.state.isLoadingWebview ? 0:1,backgroundColor: 'transparent'}}>
<ScrollView style={this.state.baseStyles.body} contentContainerStyle={{flex:1}}>
<WebView
originWhitelist={null}
style={styles.WebViewStyle}
javaScriptEnabled={true}
source={{ html: page}}
ref={(ref) => { this.webview = ref; }}
onNavigationStateChange={(event) => {
//console.log(event);
//console.log("Event URL"+event.url);
this.onWebviewPressLink(event);
}}
cacheEnabled={true}
onLoadEnd={()=>this.setState({isLoadingWebview:false})}
/>
</ScrollView>
</View>
我的主题常量：
const theme = {
primary:"#df691a",
primaryVariant:"#a74f13",
secondary:"#2b3e50",
secondaryVariant:"#a74f13",
tertiary:"#d1332e",
etc...
}
export default theme;
我知道这是旧的，OP可能不再需要它了，但它可能会帮助其他人。出于某种原因，WebView不喜欢十六进制值前面的#。去掉#后，它就可以工作了，这很奇怪，因为它与规范相矛盾。编辑：一个更好的方法可能是用%23代替#，这也有效。