ReactネイティブWebviewでのカスタムフォントの使用

私はReactネイティブアプリケーション全体でカスタムフォントを使用しています。私は反応ネイティブリンクコマンドを使用してそれらをリンクしました。彼らは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> 
    ) 
    } 
}

私は、URL（ "ファイル：/// android_assets /フォント/ロヒト-グジャラート語"）とのWebView CSS内部のフォントフェイスを作成しようとしています。それは動作しません。 GoogleのフォントをインポートするCSSが動作します。 ReactネイティブAndroid Webviewでローカルカスタムフォントを使用する正しい方法は何ですか？

出典

2017-03-22 Akshar Patel

を、あなたはあなたの良いフォント実験を投稿することができますか？それは動作するはずです。 –

@SagarKhatri：あなたがもっと必要な情報を教えてください。残念ながら、プロジェクト全体を投稿することはできません。 –

プロジェクト全体ではなく、あなたはGoogleフォントを試したと言いました。あなたはそのコードを貼り付けることができますか？ –

URL（ "ファイル：/// android_asset /フォント/ロヒト-グジャラート語"）とのWebView CSS内部のフォントフェースの作成baseUrlには、WebViewの上に設定されている場合に動作します：

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

出典

2017-04-04 11:09:36 mihai1990

これはうまくいきますが、正しいURLは 'url（" file：/// android_asset/fonts/ "）'、単数形です。 – Eddnav

@ Eddnav、ありがとう、私はURLを修正しました。 – mihai1990

ReactネイティブWebviewでのカスタムフォントの使用

答えて

関連する問題