在React本地Webview中使用自定義字體

我在整個React本機應用程序中使用自定義字體。我已經使用react-native link命令將它們鏈接起來。除了在Android的Webview組件之外，它們可以在任何地方工作。它在iOS Webview中正常工作。在React本地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> 
    ) 
    } 
}

我試圖創建一個字體面的的WebView CSS裏面用URL（「文件：/// android_assets /字體/嘉黎，古吉拉特語」）。它不起作用。導入谷歌字體的CSS工程。在React原生Android Webview中使用本地自定義字體的正確方法是什麼？

來源

2017-03-22 Akshar Patel

你可以發佈你的好字體的實驗？它應該工作。 –

@SagarKhatri：讓我知道你想要什麼更多的信息。不幸的是，我無法發佈整個項目。 –

不是整個項目，你說你已經嘗試谷歌字體。所以你可以粘貼該代碼？ –

創建字體面的的WebView CSS裏面用URL（「文件：/// android_asset /字體/嘉黎，古吉拉特語」）如果的baseUrl設置上的WebView工作：

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

我不是知道爲什麼它不沒有的baseUrl工作，但我認爲這可能是因爲RN使用不同的方法來加載web視圖時的baseUrl丟失：

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

來源

2017-04-04 11:09:36 mihai1990

這可以工作，但正確的url是'url（「file：/// android_asset/fonts/」）'，單數。 – Eddnav

@Eddnav，謝謝，我更正了網址。 – mihai1990

在React本地Webview中使用自定義字體

回答

相關問題