在React本机Webview中使用自定义字体

Question

在React本机Webview中使用自定义字体

Aks*_*tel 8 css fonts android webview react-native

我在我的整个React本机应用程序中使用自定义字体.我使用react-native link命令链接了它们.除了Android的Webview组件之外,它们可以在任何地方工作.它在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>
    )
  }
}

Run Code Online (Sandbox Code Playgroud)

我尝试用url("file:/// android_assets/fonts/Lohit-Gujarati")在webview css中创建一个font-face.它不起作用.导入谷歌字体CSS工作.在React原生Android Webview中使用本地自定义字体的正确方法是什么？

Answer 1

mih*_*990 5

如果在 WebView 上设置了 baseUrl，则可以使用 url("file:///android_asset/fonts/Lohit-Gujarati") 在 webview css 中创建字体：

<WebView
  source={{html, baseUrl: 'someUrl'}}
  style={{flex: 1}}
/>

Run Code Online (Sandbox Code Playgroud)

我不确定为什么它在没有 baseUrl 的情况下不起作用，但我认为这可能是因为 RN 在缺少 baseUrl 时使用不同的方法来加载 WebView：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	6284 次
最近记录：	7 年前