Когда я помещаю следующий CSS-код в качестве заголовка источника для моего веб-просмотра, веб-представление вообще ничего не показывает.Я сделал некоторые испытания.Иногда это работает, если я удаляю все атрибуты с константами из другого файла (если я удаляю $ {theme .----}) и заменяю их на «красный», а замена на «#ffffff» не работает.Я не понимаю, почему webview не может обрабатывать шестнадцатеричные цветовые значения.Я пробовал это с реагировать родной ^ 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;