【发布时间】:2017-12-18 13:42:38
【问题描述】:
我目前正在为我的项目使用 Expo 和 React-Navigation。在我使用 React-Navigation 和 Expo 时,我很难想出并找到将自定义字体实施到我的项目中的解决方案。
这里是 Expo 实现自定义字体的方法:https://docs.expo.io/versions/v15.0.0/guides/using-custom-fonts.html
Expo 提供了一种从资产文件夹加载字体的异步方法,这需要将这几行代码添加到定义我的顶级组件的任何地方的 componentDidMount() 中:
(从之前放置的链接复制)
componentDidMount() {
Font.loadAsync({
'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});
}
理论上,我可以在我的应用程序的每个页面中实现这一点,但这会导致我的应用程序加载更慢。理想情况下,我只想在我的顶级组件中实施一次 Expo 的步骤(在此解释:Using custom Font in react native with expo, loading font every time),因为将此解决方案实施到应用程序的每个组件中会导致加载速度变慢。
在我的 App.js 中,我导出了一个导航器,而不是一个包含 componentDidMount() 函数调用的组件。这是我的 App.js 现在的样子。
export default SimpleApp = DrawerNavigator({
Login: {
screen: SomeComponent,
navigationOptions: {
acceptPan: false,
},
},
MainTabs: {
screen: SomeTabNavigator,
navigationOptions: {
tabBarPosition:'top',
headerLeft: null
}
}
});
在这里,我导出了一个 DrawerNavigator,它不是一个组件。所以现在,我实际上什至没有顶级组件。重申一下,我想让我的 App.js 导出一些保留导航的顶级组件,并允许我实施 Expo 导入自定义字体的步骤。
谢谢!
【问题讨论】:
标签: javascript react-native fonts react-navigation expo