reactjs 设置React Native WebView的文本颜色

kpbpu008  于 2022-11-29  发布在  React
关注(0)|答案(4)|浏览(149)

我有一个HTML字符串要在WebView中显示。如何设置React Native WebView的文本color

<WebView source={{ html: this.props.content }}/>
mqkwyuun

mqkwyuun1#

要更改HTML内文本的颜色,请将HTML Package 在div标记中,并在style中设置div的字体颜色。

html = '<div style="color: white">' + html + '</div>';
<WebView source={{ html: html }} />
uemypmqf

uemypmqf2#

如果有少量的内容(例如,作为测试),您可以直接插入html字符串,格式如

<WebView source={{ html: "<strong>This is my Webview</strong>" }} />

另一种方法是将样式导入到代码中,然后将批次作为组件导出:

import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
   render()
   {
      <WebView source={{uri:'./external/widget/index.html'}} 
         scalesPageToFit/>
   }
}
export default ExternalWidget

请参阅文章here
如果你以前没有在react中使用过样式,那么很简单。将你引用的样式导出到一个组件中,或者单独导出为text.js/colors.js等,然后使用变量引用组件类。例如,如果var s引用你的stylesheet,那么s.text1将获取text 1类。
祝你好运!

kxkpmulp

kxkpmulp3#

constructor(props){
    super(props);
    this.html = this.props.data.terms_and_conditions + '<style>body{color:#464647}p,li{text-align:justify}a{color:#444}<style>'
}

render() {
    return (
        <View style={[styles.flex, { marginHorizontal:15 }]}>
           <WebView
            source={{ html: this.html }}
           />
        </View>
    );
}
zzoitvuj

zzoitvuj4#

用这个,为我解决。

<HTMLView
stylesheet={htmlStyles}
textComponentProps={{ style: {color:'red'} }}
value={content} />

相关问题