在 Exponent react-native 框架中使用 ShoutemUI/TextInput 组件时出现字体加载错误

Posted 2023-02-23

【中文标题】在 Exponent react-native 框架中使用 ShoutemUI/TextInput 组件时出现字体加载错误

【英文标题】：Font loading error when using the ShoutemUI/TextInput component in a Exponent react-native framework

【发布时间】：2017-01-12 17:48:49

【问题描述】：

我正在尝试将shoutem/ui 与指数一起使用，但在使用shoutem/ui 文本输入组件时出现错误，我收到以下错误消息fontFamily Rubik is not a system font and has not been loaded through Exponent.Font.loadAsync

但是我加载了博客文章https://blog.getexponent.com/using-react-native-ui-toolkits-with-exponent-3993434caf66#.iyiwjpwgu中列出的所有自定义shoutem字体

使用 Exponent.Font.loadAsync 方法。

 fonts: [
          FontAwesome.font,
          'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
          'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
          'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
          'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
          'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
          'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
          'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
          'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
          'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
          'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
          'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
          'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
        ],
      );

查看代码我找不到明显的修复方法 - 甚至无法找到设置样式以引发错误的位置。

【问题讨论】：

路径上的@ 是干什么用的？

我现在明白了。一个包的名字多么奇怪。

@Eldelshell，这些是作用域的 npm 包，所以人们知道 Shoutem 官方开发了什么：docs.npmjs.com/misc/scope

【参考方案1】：

上面的代码似乎少了一行。尝试将此行添加到数组列表中：

'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')

【讨论】：

是的，这解决了所有问题。

【参考方案2】：

使用链接中的代码

import React,  Component  from 'react';
import  StatusBar  from 'react-native';
import  Font, AppLoading  from 'expo';
import  View, Examples  from '@shoutem/ui';

export default class App extends React.Component 
  state = 
    fontsAreLoaded: false,
  ;

  async componentWillMount() 
    await Font.loadAsync(
      'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    );

    this.setState( fontsAreLoaded: true );
  

  render() 
    if (!this.state.fontsAreLoaded) 
      return <AppLoading />;
    

    return (
      <View styleName="flexible">
        <Examples />
        <StatusBar barStyle="default" hidden=false />
      </View>
    );