Solución:
1) Solo debes cargar la fuente una vez. Como señala, Expo recomienda poner el método Font.loadAsync en el método componentDidMount () de su componente de nivel superior.
El problema de rendimiento al que se refiere probablemente sea la magia que está sucediendo detrás de la llamada asincrónica, pero nuevamente, esto solo debería suceder una vez.
2) A partir de ese momento, puede usar la fuente en cualquier componente secundario usando la propiedad “fontFamily” en <Text>. Como muestra su ejemplo (que modifiqué ligeramente):
Primero cargue la fuente en su componente de nivel superior.
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
}
render() {
return (
<HelloWorld />
)
}
}
Luego úselo en cualquier componente de la aplicación. (Antes de cargar la fuente, verá la fuente del sistema: San Francisco en iOS, Roboto en Android. Es por eso que Expo recomienda establecer un estado de carga … para evitar parpadeos incómodos entre la fuente del sistema y la fuente personalizada recién cargada. )
export default class HelloWorld extends React.Component {
render() {
<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
Hello, world!
</Text>
}
}
3) Este es un “problema” relacionado con la Expo (o solución … dependiendo de cómo se mire). Por ejemplo, en iOS, agregar una fuente personalizada implica varios pasos (agregar el archivo de fuente a su proyecto nativo, asegurarse de que la fuente se muestre en sus Recursos del paquete, agregar la fuente a Info.plist …). No estoy seguro de cuál es el proceso para Android, pero es algo diferente y probablemente también molesto.
Expo ha resumido eso con su módulo Font, que le permite hacer una cosa y obtener el mismo resultado en todas las plataformas. Lo cual es muy bueno, en mi libro.