设置React Native WebView的文本颜色

Question

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

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

Answer 1

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

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

请参见文章here

如果您以前未在react中使用过样式，这很简单。将您引用的样式导出到一个组件中，或分别导出为text.js / colors.js等，然后使用变量引用组件类。例如，如果var引用了您的stylesheet，则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>
    );
}