设置 React Native WebView 的文本颜色

Question

我有一个HTML字符串，它将显示在WebView中。如何设置 React 原生WebView的文本color？

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

Answer 1

要更改 HTML 中文本的颜色，请将 html 包装在div标记中，并在style中设置div的字体颜色。

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

Answer 2

如果有少量内容(例如，作为测试(，您可以直接插入带有格式的 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

在此处查看文章

如果你以前没有在 react 中使用过样式，这很简单。将引用的样式导出到一个组件中，或单独导出为文本.js/颜色等.js并使用变量引用组件类。 例如，如果 var s 引用你的样式表，那么 s.text1 将获取 text1 类。

祝你好运！

Answer 3

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>
);
}

Answer 4

使用这个，为我解决了。

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