react-native，react-native webview字体家族，webview字体家族

Question

如何使用React Native WebView设置Live网站字体系列

我正在使用本机WebView为特定网站创建自定义设计，并创建类似移动应用程序的屏幕。

我面临设置特殊对象字体系列的问题。我想应用raleway（谷歌字体）

但是它在Android中不提供支持，在iPhone中受支持。

下面是我的代码injectjs代码：

injectjs() {
let metatag = `var metaTag=document.createElement('meta'); metaTag.name = "viewport"; metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"; document.getElementsByTagName('head')[0].appendChild(metaTag);`;
let jsCode1 = `document.getElementsByClassName("container")[1].getElementsByClassName("offset-md-1")[0].innerHTML = "";`; // To remove Welcome to Text Content
let jscode2 = `document.getElementsByClassName("sidebar-fixed")[0].getElementsByClassName("app-header")[0].innerHTML = "";`; // To Remove Header
let jscode3 = `document.getElementsByClassName("sidebar-fixed")[0].getElementsByClassName("app-footer")[0].innerHTML = "";`; // To Remove Footer
let jscode4 = `document.getElementsByClassName("auth-form")[0].getElementsByClassName("auth-form-title")[0].innerHTML = "";`; // To Remove Login Text of form

// To Remove Text Input Email and Password Icon
let jscode5 = `var slides = document.getElementsByClassName("input-group-md");
for(var i = 0; i < slides.length; i++)
{
  slides[i].getElementsByClassName("input-group-addon")[0].innerHTML="";
  slides[i].getElementsByClassName("input-group-addon")[0].style.padding="0px";
  slides[i].getElementsByClassName("input-group-addon")[0].style.marginBottom="0px";
  slides[i].getElementsByClassName("input-group-addon")[0].style.fontSize="0px";
  slides[i].getElementsByClassName("input-group-addon")[0].style.fontWeight="none";
  slides[i].getElementsByClassName("input-group-addon")[0].style.lineHeight="0px";
  slides[i].getElementsByClassName("input-group-addon")[0].style.color="";
  slides[i].getElementsByClassName("input-group-addon")[0].style.textAlign="none";
  slides[i].getElementsByClassName("input-group-addon")[0].style.backgroundColor="transparent";
    slides[i].getElementsByClassName("input-group-addon")[0].style.opacity="1";
    slides[i].getElementsByClassName("input-group-addon")[0].style.border="0px";
  slides[i].getElementsByClassName("input-group-addon")[0].style.borderRadius="0px";
  slides[i].removeChild(slides[i].childNodes[0]);
  slides[i].getElementsByClassName("form-control")[0].style.borderRadius="15px";
  slides[i].getElementsByClassName("form-control")[0].style.borderColor="#a8d0d0";
  slides[i].getElementsByClassName("form-control")[0].style.backgroundColor="transparent";
  if(i==0)
  {
    slides[i].getElementsByClassName("form-control")[0].placeholder="";
    slides[i].getElementsByClassName("form-control")[0].style.color="#a8d0d0";
    slides[i].getElementsByClassName("form-control")[0].className = "form-control textInputEmail";

  }
  else{
    slides[i].getElementsByClassName("form-control")[0].placeholder=""; 
    slides[i].getElementsByClassName("form-control")[0].style.color="#a8d0d0"; 
    slides[i].getElementsByClassName("form-control")[0].className = "form-control textInputPassword";
  }
}`;

let jscode7 = `document.getElementsByClassName("sidebar-fixed")[0].style.backgroundImage = "url('imageURL')";`;

// For Header Operation
let jscode8 = `document.getElementsByClassName("app-header")[0].innerHTML="";`;  // To hide app or website header
let jscode9 = `document.getElementsByClassName("app-header")[0].style.height="0px";`;  // To set Header style null to hide it
let jscode10 = `document.getElementsByClassName("app-header")[0].style.backgroundColor ="";`;  // To set Header style null to hide it
let jscode11 = `document.getElementsByClassName("app-header")[0].style.borderBottom="";`;  // To set Header style null to hide it


// For Footer Operation
let jscode12 = `document.getElementsByClassName("app-footer")[0].innerHTML="";`;  // To hide app or website header
let jscode13 = `document.getElementsByClassName("app-footer")[0].style.background ="transparent";`;  // To hide app or website header
let jscode14 = `document.getElementsByClassName("app-footer")[0].style.borderTop="0px";`;  // To hide app or website header

let jscode15 = `document.getElementsByClassName("col-md-4")[0].getElementsByClassName("auth-form")[0].style.marginTop="45%";`;

let jscode16 = `var floatingLabel = document.getElementsByClassName("floating-label");

for(var i = 0; i < floatingLabel.length; i++)
{
  floatingLabel[i].getElementsByClassName("control-label")[0].innerHTML="";
}`;


let jscode17 = `document.getElementsByClassName("btn-primary")[0].style.marginTop="75px";`;
let jscode18 = `document.getElementsByClassName("text-center")[0].style.marginTop="-100px";`;
let jscode19 = `document.getElementsByClassName("btn-block")[0].style.borderColor="#a8d0d0";`;
let jscode20 = `document.getElementsByClassName("btn-block")[0].style.backgroundColor="transparent";`;
let jscode21 = `document.getElementsByClassName("btn-block")[0].innerHTML="LOGIN";`;

let jscode22 = `document.getElementsByClassName("text-center")[0].getElementsByTagName("small")[0].firstChild.style.color="#a8d0d0";`;
let jscode23 = `var form = document.getElementsByClassName("form-group");
for(var i = 0; i < form.length; i++)
{
  if (i != form.length - 1) {
  }
  else{
    document.getElementById("login-form").insertAdjacentHTML("afterend","<div class='text-center registerDiv'><a style='font-size: 80%;' class='text-center button-register' href='https://website.com/register'>Register for a free account</a></div>");  
  }
};`;


let jscode24 = `var logoImg = document.createElement("img");
logoImg.setAttribute("src", "https://s3-us-west-2.amazonaws.com/live-experiences-image/4170d6a1-1b66-4877-ac80-4d2144fb595e-testexp.png");
logoImg.setAttribute("height", "208");
logoImg.setAttribute("width", "176");
var loginForm = document.getElementsByClassName("col-md-4");
loginForm.innerHTML=logoImg;`;

let jscode25 = `document.getElementsByClassName("button-register")[0].style.color="#a8d0d0";`;
let jscode26 = `document.getElementsByClassName("button-register")[0].style.marginTop="-100px";`;
let jsconde27 = `document.getElementsByClassName("registerDiv")[0].style.marginTop="40px";`;

let jscode28 = `document.getElementsByClassName("textInputEmail")[0].style.backgroundImage="url('emailPlaceHolderImageURL')";`;

let jscode29 = `document.getElementsByClassName("textInputEmail")[0].style.backgroundSize = "20px 20px";`;
let jscode30 = `document.getElementsByClassName("textInputEmail")[0].style.backgroundRepeat = "no-repeat";`;
let jscode31 = `document.getElementsByClassName("textInputEmail")[0].style.backgroundPosition = "left 10px top 10px";`;
let jscode32 = `document.getElementsByClassName("textInputEmail")[0].style.height="45px";`;
let jscode33 = `document.getElementsByClassName("textInputEmail")[0].style.borderRadius="25px";`;


let jscode34 = `document.getElementsByClassName("textInputPassword")[0].style.backgroundImage="url('passwordPlaceHolderImageURL')";`;

let jscode35 = `document.getElementsByClassName("textInputPassword")[0].style.backgroundSize = "20px 20px";`;
let jscode36 = `document.getElementsByClassName("textInputPassword")[0].style.backgroundRepeat = "no-repeat";`;
let jscode37 = `document.getElementsByClassName("textInputPassword")[0].style.backgroundPosition = "left 13px top 10px";`;
let jscode38 = `document.getElementsByClassName("textInputPassword")[0].style.height="45px";`;
let jscode39 = `document.getElementsByClassName("textInputPassword")[0].style.borderRadius="25px";`;


let jscode40 = `document.getElementsByClassName("textInputEmail")[0].setAttribute('onfocusin',"this.style.backgroundSize = '0px 0px'");`;

let jscode46 = `document.getElementsByClassName("auth-form")[0].insertAdjacentHTML("beforebegin","<div class='text-center imgLogo'><img src='websiteLogoURL' class='text-center imgLogoImg'></div>");`;


let jscode47 = `document.getElementsByClassName("textInputEmail")[0].setAttribute('onfocusout',"this.value==''?this.style.backgroundSize = '90px 22px':this.style.backgroundSize = '0px 0px'");`;

let jscode48 = `document.getElementsByClassName("textInputPassword")[0].setAttribute('onfocusin',"this.style.backgroundSize = '0px 0px'");`;
let jscode49 = `document.getElementsByClassName("textInputPassword")[0].setAttribute('onfocusout',"this.value==''?this.style.backgroundSize = '119px 22px':this.style.backgroundSize = '0px 0px'");`;
let jscode50 = `document.getElementsByClassName("imgLogo")[0].style.marginBottom="0px";`;

let jscode51 = `document.getElementsByTagName("small")[0].style.fontSize="15px";`;
let jscode52 = `document.getElementsByClassName("button-register")[0].style.fontSize="15px";`;

let jscode53 = `document.getElementsByClassName("textInputEmail")[0].style.backgroundSize="90px 22px";`;
let jscode54 = `document.getElementsByClassName("textInputPassword")[0].style.backgroundSize="119px 22px";`;

let jscode55 = `document.getElementsByClassName("sidebar-fixed")[0].style.backgroundSize="100% 100%";`;


let jscode56 = `var inputGroupMD = document.getElementsByClassName("input-group-md");
for(var i = 0; i < inputGroupMD.length; i++)
{
  inputGroupMD[i].style.width="90%";
  inputGroupMD[i].style.marginLeft="4.9%";
};`;

let jscode57 = `document.getElementById("login-button").style.width="90%";`;
let jscode58 = `document.getElementById("login-button").style.marginLeft="4.9%";`;


let jscode59 = `document.getElementsByClassName("sidebar-fixed")[0].style.fontFamily="raleway";`;
let jscode60 = `document.getElementsByClassName("text-center")[0].style.fontFamily="raleway";`;

let jscode61 = `setTimeout(function() { var anchor = document.getElementsByTagName("small")[0];
anchor.getElementsByTagName("a")[0].setAttribute("href","https://website.com/reset");
anchor.getElementsByTagName("a")[0].style.fontFamily="raleway"; }, 3000)`;

let jscode62 = `document.getElementsByTagName("body")[0].insertAdjacentHTML("beforebegin","<style type='text/css'>@font-face{font-family: raleway; src: url('fontURL');} </style>");`;

return metatag + jsCode1 + jscode2 + jscode3 + jscode4 + jscode5 + jscode7 + jscode8 + jscode9 + jscode10 + jscode11 + jscode12 + jscode13 + jscode14 + jscode15 + jscode16 + jscode17 + jscode18 + jscode19 + jscode20 + jscode21 + jscode22 + jscode23 + jscode24 + jscode25 + jscode26 + jsconde27 + jscode28 + jscode29 + jscode30 + jscode31 + jscode32 + jscode33 + jscode34 + jscode35 + jscode36 + jscode37 + jscode38 + jscode39 + jscode40 + jscode46 + jscode47 + jscode48 + jscode49 + jscode50 + jscode51 + jscode52 + jscode53 + jscode54 + jscode55 + jscode56 + jscode57 + jscode58 + jscode59 + jscode60 + jscode61;

}

下面是我的渲染方法：

  render() {
       return (
         <View style={{ flex: 1, height: '100%', marginTop: -1, }}>
         <WebView
          source={{ uri: 'website.com' }}
          javaScriptEnabledAndroid={true}
          thirdPartyCookiesEnabled={true}
          onNavigationStateChange={this.onNavigationStateChange}
          //onMessage={this._onMessage.bind(this)}
          onMessage={this._onMessage}
          injectedJavaScript={window.onload = this.injectjs()}
          scalesPageToFit
          javaScriptEnabled
          domStorageEnabled
          startInLoadingState
          mixedContentMode="always"
         />
         </View>
);

}

在jscode61和jscode62中，我尝试将font-family应用到react-native屏幕，它在网站控制台和iPhone中都可以使用。 在Android设备上无法正常工作。

即使我已经从资产中的componentdidmount（）中导入了该字体ttf，这也是Google字体

谢谢。