如何更改 react-native webview 的字体系列（font-family.ttf from assets）

Question

我正在使用react-native webview在我的react-native应用程序中显示一些 web 内容。 我的应用程序font-family和webview font-family不同。 我想从应用程序更改webview font-family 。

有什么方法可以更改webview的font-family （自定义字体来自资产目录），请帮助我..谢谢

Answer 1

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

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

工作示例链接