android - 如何更改 react-native webview 的 font-family (font-family.ttf from assets)

Question

我正在使用 react-native webview在我的react-native应用程序。和我的应用程序 font-family和 webview font-family是不同的。
我要改webview font-family从应用程序。
有什么方法可以改变font-family的 webview (custom-font-from-assets-directory)，请帮帮我.. 谢谢

Answer 1

您可以通过将 java 脚本注入(inject)到您的 WebView 中来实现这一点
IE。
将以下代码注入(inject) Web View ，这将更改正文标签 fontFamily

const INJECTED_JAVASCRIPT = `(function() {
   let body = document.getElementsByTagName("BODY")[0];
  body.style.fontFamily = "Courier New";
})();`;

Web View 组件

<WebView
        source={{ uri: 'https://reactnative.dev' }}
        onLoadEnd={()=>console.log('Successfuly Loaded')}
        injectedJavaScript={INJECTED_JAVASCRIPT}
        onError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          console.warn('WebView error: ', nativeEvent);
        }}
      />

工作示例 Link