Question

当我将以下CSS代码作为Webview的源代码的头时，Webview根本不显示任何内容。我做了一些测试。如果我从另一个文件中删除所有带有常量的属性（如果我删除$ {theme .----}）并将其替换为“ red”，则有时它会起作用，而将其替换为“ #ffffff”不起作用。我不明白为什么webview无法处理hex-colorvalues。我已经尝试了本机^ 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;

当我将带有颜色的样式放在头部时，Webview不会显示任何内容

0 个答案: