Question

我在整个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>
    )
  }
}

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

Answer 1

使用url（＆＃34; file：/// android_asset / fonts / Lohit-Gujarati＆＃34;）在webview css中创建font-face，如果在WebView上设置了baseUrl，则有效：

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

我不确定为什么没有baseUrl它不起作用，但我认为这可能是因为当baseUrl丢失时RN使用不同的方法来加载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);
}

Answer 2

此代码对我有效。

var css = `<head><style type="text/css"> @font-face {font-family: 'BYekan'; src:url('file:///android_asset/fonts/B Yekan.ttf')}</style></head>`;
var HTML = css + `<p style='font-family:BYekan'>Some Text</p>`
<WebView    
  source={{ baseUrl: '', html: HTML }}   
/>

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

2 个答案: