万華鏡フォントのグローバルスタイルシート

Question

私はExpoを使用しており、グローバルスタイルシートでカスタムフォントを使用する必要があります。エキスポdocumentsこの、しかし、それはcomponentDidMount（以来、私の場合には関係ありません）のみクラス内で実行されます。

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

    // ... 
} 

私のグローバルスタイルシートは、次のようになります。

const React = require('react-native'); 

import { 
    Dimensions, 
    StatusBar, 
} from 'react-native'; 

const { StyleSheet } = React; 

export default { 
    // ... 
} 

Answer 1

私はちょうど内のフォントをロードすることになりましたナビゲーションファイルを作成し、グローバルスタイルシートやアプリケーション全体でこれらのフォントにアクセスすることができました。

Answer 2

フォントが読み込まれる前にフォントを参照するStyleSheetオブジェクトを作成できるという意味で、Expoのフォント読み込みは「遅延」です。たとえば、次のコードは有効です。

async function exampleAsync() { 
    let stylesheet = StyleSheet.create({ 
    fancyText: { 
     ...Expo.Font.style('open-sans-bold'), 
    }, 
    }); 

    await Expo.Font.loadAsync({ 
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'), 
    }); 
} 

ですから、必ずしもcomponentDidMount内Expo.Font.loadAsyncを呼び出す必要はありませんし、フォントがロードされる前に、それはStyleSheet.createとExpo.Font.styleを呼び出すためにOKです。

重要な点は、ロードされたフォントを使用するスタイルを持つコンポーネントをレンダリングする前に、Expo.Font.loadAsyncが完了するまで待つことです。

Answer 3

ルート/トップコンポーネントには、フォントの非同期が既に終了しているかどうかをチェックする状態フラグを追加するだけです。

次に、レンダリングメソッドに条件を追加して、フォントが正常に読み込まれた後に子コンポーネントがレンダリングされるようにします。例を参照してください

 export default class App extends React.Component { 
     state = { 
     fontLoaded: false, 
     } 

     componentDidMount() { 
     this.loadAssetsAsync(); 
     } 

     async loadAssetsAsync() { 
     await Expo.Font.loadAsync({ 
     'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'), 
     });; 

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

     render() { 
     if (!this.state.fontLoaded) { 
      return <AppLoading />; // render some progress indicator 
     } 

     return (
      <Navigator /> //render your child components tree 
     ); 
     } 
    }