web-dev-qa-db-ja.com

expoとネイティブで反応するカスタムフォントを使用して、毎回フォントをロードする

Expoとcreate-react-nativeアプリを使用しています。携帯電話でライブ/ホットリロード機能を楽しんでいますが、カスタムフォントについて疑問に思っています。

https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app

ExpoのAPIには、非同期でロードする指示しかありません。カスタムフォントが必要なすべてのコンポーネントでこれを行う必要がありますか？これは、一度ロードしたときに不要な呼び出しが発生するようです。

フォントをグローバルに設定する方法、またはロード後にプロップを介して渡す方法はありますか？彼らはそのリンクの最後の行でこのアプローチを提案しているようです：

注：通常、アプリが表示される前にアプリのプライマリフォントを読み込んで、フォントの読み込み後にテキストがフラッシュインしないようにする必要があります。推奨されるアプローチは、Font.loadAsync呼び出しを最上位コンポーネントに移動することです。

...しかし、それが意味するものである場合、彼らはそれを行う方法について説明しません。

だから私の質問は：

1）カスタムフォントを複数回（各コンポーネントで）ロードすると、パフォーマンスの問題が発生しますか？ （または、最初にキャッシュからプルされたのでしょうか？）

2）ロードした後、プロパティを介してフォントを渡すか、グローバルとして設定できますか？

そして最後に

3）これはExpoのみの問題ですか？または、create-react-nativeアプリのみの問題ですか？それともlivereload/hotloadingの問題だけですか？

また、Windows/Androidで作業しています

react-nativefontsexpo
6
Organiccat

1）フォントは1回だけロードする必要があります。ご指摘のとおり、Expoでは、最上位コンポーネントのcomponentDidMount（）メソッドにFont.loadAsyncメソッドを配置することをお勧めします。

あなたが言及しているパフォーマンスの問題は、おそらく非同期呼び出しの背後で起こっている魔法です-しかし、繰り返しになりますが、これは一度だけ起こるはずです。

2）それ以降、<Text>の "fontFamily"プロパティを使用して、任意の子コンポーネントでフォントを使用できます。彼らの例（少し変更しました）が示すように：

まず、最上位のコンポーネントにフォントを読み込みます。

export default class App extends React.Component {
  componentDidMount() {
    Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });
  }

  render() {
    return (
       <HelloWorld />
    )
  }
}

次に、アプリの任意のコンポーネントで使用します。 （フォントのロードの前に、システムフォントが表示されます-iOSのサンフランシスコ、AndroidのRoboto。これが、システムフォントと新しくロードされたカスタムフォントの間で不自然なフラッシュを避けるために、Expoがロード状態を設定することを推奨する理由です。 ）

export default class HelloWorld extends React.Component {
  render() {
    <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
      Hello, world!
    </Text>
  }
}

3）これはExpo関連の「問題」（または解決策...は、それの見方によって異なります）。たとえば、iOSでは、カスタムフォントの追加にはいくつかの手順が必要です（フォントファイルをネイティブプロジェクトに追加し、フォントがバンドルリソースに表示されることを確認し、フォントをInfo.plist ...に追加します...）。 Androidのプロセスが何であるかはわかりませんが、それは何か別のものであり、おそらく煩わしいものでもあります。

Expoは、Fontモジュールを使用してこれを抽象化しました。これにより、1つのことを実行して、プラットフォーム間で同じ結果を得ることができます。私の本では、それはかなりクールです。

5
bayyar

私はスレッドが古いことを知っていますが、これは他の人にも役立つかもしれません。直接使用Font.asyncLoad()は、システムフォントエラーを引き起こします。

fontFamily "roboto-medium"はシステムフォントではなく、Font.loadAsyncを介して読み込まれていません

export default class App extends React.Component {

    state = {
        assetsLoaded: false,
    };

    async componentDidMount() {
        await Font.loadAsync({
            'roboto-medium': require('./assets/fonts/Roboto-Medium.ttf')
        });

        this.setState({ assetsLoaded: true });
    }

    render() {

        const {assetsLoaded} = this.state;

        if( assetsLoaded ) {
            return (
                <View style={styles.container}>
                    <Text style={styles.heading}>Custom Roboto Font</Text>
                    <Text style={{fontSize: 40}}>Default Font</Text>
                </View>
            );
        }
        else {
            return (
                <View style={styles.container}>
                    <ActivityIndicator />
                    <StatusBar barStyle="default" />
                </View>
            );
        }
    }
}

詳細を知りたい場合は、リンクをクリックしてください。

https://webomnizz.com/add-custom-font-to-react-native-using-expo/

0
jogesh_pi

Font（expo）を効率的に使用するには、ルートのほとんどのコンポーネントにフォントをロードし、ロードすると、グローバルでステータスfontLoaded：trueを更新できます状態[Redux]。

それは私が媒体でよく説明しています これを参照

お役に立てれば。

0
kida007