我有一个HTML字符串要在WebView中显示。如何设置React Native WebView的文本color?
WebView
color
<WebView source={{ html: this.props.content }}/>
mqkwyuun1#
要更改HTML内文本的颜色,请将HTML Package 在div标记中,并在style中设置div的字体颜色。
div
style
html = '<div style="color: white">' + html + '</div>'; <WebView source={{ html: html }} />
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类。祝你好运!
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> ); }
zzoitvuj4#
用这个,为我解决。
<HTMLView stylesheet={htmlStyles} textComponentProps={{ style: {color:'red'} }} value={content} />
4条答案
按热度按时间mqkwyuun1#
要更改HTML内文本的颜色,请将HTML Package 在
div
标记中,并在style
中设置div
的字体颜色。uemypmqf2#
如果有少量的内容(例如,作为测试),您可以直接插入html字符串,格式如
另一种方法是将样式导入到代码中,然后将批次作为组件导出:
请参阅文章here
如果你以前没有在react中使用过样式,那么很简单。将你引用的样式导出到一个组件中,或者单独导出为text.js/colors.js等,然后使用变量引用组件类。例如,如果var s引用你的stylesheet,那么s.text1将获取text 1类。
祝你好运!
kxkpmulp3#
zzoitvuj4#
用这个,为我解决。