如何更改 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（自定义字体从资产目录），请帮我..谢谢

Answer 1

您可以通过将 java 脚本注入到您的 web 视图中来实现这一点

IE

将以下代码注入到 Web 视图中，这将更改 body 标签 fontFamily

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

Web视图组件

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

工作示例链接