我在整个 React 原生应用程序中使用自定义字体.我已经使用 react-native link 命令链接了它们.除了在 Android 的 Webview 组件内部之外，它们在任何地方都可以使用.它在 iOS Webview 中正常工作.
I'm using custom fonts in my entire React native application. I have linked them using react-native link command. They work everywhere except inside the Webview component of Android. It works properly in iOS Webview.
import React, { Component } from "react" import { View, StyleSheet, Text, WebView, ScrollView, Image } from "react-native" import HTMLView from "react-native-htmlview" export class PostDetailPage extends Component { static navigationOptions = { title: ({ state }) => state.params.post.title, header: { style: { backgroundColor: '#FF9800', }, titleStyle: { color: 'white', fontFamily: "Ekatra", fontWeight: "normal" }, tintColor: 'white' } } constructor(props) { super(props) } render() { const post = this.props.navigation.state.params.post const html = ` <!DOCTYPE html> <html> <head> <style type="text/css"> body { font-family: Lohit-Gujarati; font-size: 1.25rem; color: black; padding: 0px 10px 10px 10px; } p { text-align: justify; } </style> </head> <body> ${post.content} </body> </html> ` return ( <View style={{ flex: 1, overflow: "visible" }}> <Image source={{ uri: post.featured_image }} style={{ height: 150 }} /> <WebView source={{html}} style={{flex: 1}} /> </View> ) } }我尝试使用 url("file:///android_assets/fonts/Lohit-Gujarati") 在 webview css 中创建字体.它不起作用.导入谷歌字体 css 有效.在 React Native Android Webview 中使用本地自定义字体的正确方法是什么?
I have tried creating a font-face inside the webview css with url("file:///android_assets/fonts/Lohit-Gujarati"). It doesn't work. Importing google fonts css works. What is the right way to use local custom fonts in React native Android Webview?
推荐答案如果 baseUrl 设置为 on，则使用 url("file:///android_asset/fonts/Lohit-Gujarati") 在 webview css 中创建 font-face网络视图:
Creating a font-face inside the webview css with url("file:///android_asset/fonts/Lohit-Gujarati") works if baseUrl is set on WebView:
<WebView source={{html, baseUrl: 'someUrl'}} style={{flex: 1}} />我不确定为什么它在没有 baseUrl 的情况下不起作用，但我认为可能是因为当缺少 baseUrl 时 RN 使用不同的方法加载 WebView:
I'm not sure why it doesn't work without baseUrl, but I think it can be because RN uses a different method to load the WebView when baseUrl is missing:
if (source.hasKey("baseUrl")) { view.loadDataWithBaseURL( source.getString("baseUrl"), html, HTML_MIME_TYPE, HTML_ENCODING, null); } else { view.loadData(html, HTML_MIME_TYPE, HTML_ENCODING); }更多推荐
在 React Native Webview 中使用自定义字体
发布评论