全球樣式表中的世博字體

我正在使用世博會，並且需要在全局樣式表中使用自定義字體。世博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 { 
    // ... 
}

來源

2017-02-13 Molly Harper

我結束了在短短加載字體導航文件，然後可以在我的全局樣式表和整個應用程序中訪問這些字體。

來源

2017-02-13 18:55:54

世博會中的字體加載是「懶惰」的，因爲您可以在加載之前創建引用字體的StyleSheet對象。例如，下面的代碼是有效的：

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

所以你不需要調用內componentDidMountExpo.Font.loadAsync必然，它是確定加載字體之前調用StyleSheet.create和Expo.Font.style。

重要的是，在渲染其樣式使用加載字體的組件之前，您需要等待Expo.Font.loadAsync才能完成。

來源

2017-03-07 20:22:23 ide

你可以做的只是在你的root/top組件中添加一個狀態標誌來檢查字體異步是否已經完成。

然後在渲染方法中添加一個條件，以確保只有在字體被成功載入後，您的子組件纔會被渲染。請參閱示例

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

來源

2017-08-31 17:46:35 tomekz

全球樣式表中的世博字體

回答

相關問題