当我将带有颜色的样式放在头部时，Webview 什么也不显示答案

【问题标题】：Webview shows nothing when I put styles with color in head当我将带有颜色的样式放在头部时，Webview 什么也不显示
【发布时间】：2019-02-08 14:09:57
【问题描述】：

当我将以下 CSS 代码作为我的 webview 的源代码时，webview 什么也没有显示。我做了一些测试。如果我从另一个文件中删除所有带有常量的属性（如果我删除 ${theme.----}）并用“red”替换它们，它有时会起作用，用“#ffffff”替换它是行不通的。我不明白为什么 webview 不能处理十六进制颜色值。我已经用 react-native ^2 ^3 和 ^5 试过了，都没有。我的代码过去可以正常工作，并且过去可以在 head 中使用样式，但找不到发生了什么变化。

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;

【问题讨论】：

能否提供一个完整的 App.js 以便我们运行它？您不必发布整个<body>。
@diogenesgg 我添加了更多上下文。
我觉得你的问题不依赖于css代码。你的ender() 方法到底怎么样？找到一种方法将最终的 html 代码导出到 .html 文件中，以便您可以在浏览器上打开它以进行验证。

标签： android react-native webview

【解决方案1】：

我知道这是旧的，OP 可能不再需要它，但它可能对其他人有所帮助。出于某种原因，WebView 不喜欢十六进制值前面的 #。删除 # 后它可以工作，这很奇怪，因为它与规范相矛盾。编辑：更好的方法可能是将# 替换为%23，这也可以。

【讨论】：