RN 修改webView 引入的HTML文件

webview:用于访问一个网页,类比HTML的a标签.

关于webview的使用,文档写的很清楚,直接照搬就可以了:

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
import GlobalConfig from '../../../server';

export default  class MyWeb extends Component {
  render() {
    return (
      <WebView
      // URI 这里自己拼接了一下HTML路径
        source={{uri: GlobalConfig.apkHost + '/app/my-view.html'}}
        style={{marginTop: 20}}
      />
    );
  }
}}

现在我需要修改html文件里面的样式,解决办法:
使用webview的injectedJavaScript:在网页加载之前向html文件注入一段js代码(string类型),通过js来修改html文件.

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
import GlobalConfig from '../../../server';

export default class ProvicyPolicyPage extends Component {
  render() {
    const jsCode = `(
      function() {
        document.querySelector("body").style.color = '#a3a3a3';
        document.querySelector("h3").style.color = '#8ce8f1';
        document.querySelector("body > b:nth-child(2)").style.color = '#8ce8f1';
        document.querySelector("body > b:nth-child(4)").style.color = '#8ce8f1';
     })();`;
    return (
      <WebView
        source={{uri: GlobalConfig.apkHost + '/app/privacy-policy.html'}}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        injectedJavaScript={jsCode}
      />
    );
  }
}