Я использовал это решение, чтобы применить CSS к моему HTML-тексту, исходящему из API.
Проблема с решением, с которым я сталкиваюсь, заключается в том, что я хочу применить пользовательский шрифт к html и заменить маркеры фоновым изображением, как я делал бы в любой сети, но он не работает
Примечание: В веб-представлении, которое я прикрепил, есть какой-то мусор, потому что я экспериментировал с ним, увидев мой код, вы могли догадаться, чего я пытаюсь достичь,
Пожалуйста, предложите кроссплатформенное решение или любую библиотеку, эквивалентную тому, что я пытаюсь достичь
Спасибо.
МОЙ CSS
let htmlStyle = `<style>
@font-face {
font-family:myFirstFont;
src:url(file:///android_asset/fonts/Khand-Regular.ttf);
font-weight: normal;
}
body{
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:myFirstFont
}
p{
color:#666666;
font-size:5vw;
font-family:myFirstFont;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
h5{
color:#1AA154;
font-family:myFirstFont;
font-size:6vw;
margin:2vw 0px 0vw 0px;
padding: 0px 0px 0px 0px;
}
li{
background:url('../../assets/images/icons/tickIcon.png') contain;
color:#666666;
font-size:5vw;
font-family:Khand;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>`
ДРУГОЙ Код поддержки, как описано в решении
let des = this.state.product.short_description ? this.state.product.short_description : this.state.product.description
let rawHTML = htmlStyle + des.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "")
МОЙ ВЕБ-ВИД
<WebView allowUniversalAccessFromFileURLs={true} thirdPartyCookiesEnabled={true} mixedContentMode="always" originWhitelist={["*"]} scalesPageToFit={true} style={{height:60*vh,width:'100%',alignSelf:"baseline",fontFamily:Fonts.KR}} source={{html:rawHTML}}/>
Это то, что я получаю в веб-просмотре, что я пытаюсь стилизовать
<p>Be the Ruler and the Leader of your Kingdom with these perfect accessories to your King’s Gown.</p> <h5>Includes</h5> <p>King’s Crown – metallic silver or gold</p>