如何更改react-native webview的font-family (资源中的font-family y.ttf)

Question

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

有什么方法可以改变webview (webview-font-from-assets directory)的字体吗?请帮助我..谢谢

Answer 1

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

即

将以下代码注入web视图，这将更改主体标记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);
        }}
      />

工作示例Link