在 React Native Webview 中使用自定义字体 [英] Using custom fonts in React native Webview
问题描述
我在整个 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 中使用自定义字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!