Question

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

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

Answer 1

如果内容很少（例如，作为测试），则可以直接插入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 2

要更改HTML内文本的颜色，请将html包裹在function goLocation(val){ if(accessLVL == 1){ window.location.href= "http://www.someweb.co.uk/load.php?titleID="+val; } else{ alert("Page locked... If you would like to go there buy a access"); }标记中，并在div中设置div的字体颜色。

style

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

设置React Native WebView的文本颜色

3 个答案: