React Native - Expo：fontFamily 'SimpleLineIcons' 不是系统字体，尚未通过 Font.loadAsync 加载

Posted 2023-02-22

【中文标题】React Native - Expo：fontFamily \'SimpleLineIcons\' 不是系统字体，尚未通过 Font.loadAsync 加载

【英文标题】：React Native - Expo: fontFamily 'SimpleLineIcons' is not a system font and has not been loaded through Font.loadAsyncReact Native - Expo：fontFamily 'SimpleLineIcons' 不是系统字体，尚未通过 Font.loadAsync 加载

【发布时间】：2019-04-19 03:40:56

【问题描述】：

所以我在 android 设备/模拟器上收到此错误：

另一方面，在 ios 上，它编译得很好，simple-line-icons 可以正确显示。

我正在运行最新版本的 expo。

我的 package.json：

  "name": "FamScore3",
  "version": "0.1.0",
  "private": true,
  "devDependencies": 
    "react-native-scripts": "1.14.0",
    "jest-expo": "^31.0.0",
    "react-test-renderer": "16.3.1"
  ,
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": 
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  ,
  "jest": 
    "preset": "jest-expo"
  ,
  "dependencies": 
    "@firebase/auth": "^0.7.6",
    "@firebase/database": "^0.3.6",
    "axios": "^0.18.0",
    "metro-react-native-babel-preset": "^0.45.0",
    "expo": "^31.0.4",
    "firebase": "^5.5.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
    "react-native-elements": "^0.19.1",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-router-flux": "^4.0.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  

我的 app.json：

  "expo": 
    "sdkVersion": "31.0.0"
  

我在文档中实现的 App.js 中的 Font.loadAsync 方法：

export default class App extends Component 

  state = 
    fontLoaded: false
  

  async componentDidMount() 
    try 

      await Font.loadAsync(
        amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
        indieFlower: require('./assets/fonts/indieFlower.ttf'),
        'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
        'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')

      )

      this.setState( fontLoaded: true )

     catch (error) 
      console.log('error loading fonts', error);
    

  

  render() 
    const store = createStore(reducers, , applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) 
      return <AppLoading />
    

    return (
      <Provider store=store>
        <Router />
      </Provider> 
    )
  

提前非常感谢。任何帮助将非常感激！ 我被困了一段时间。

【参考方案1】：

好的，所以我终于设法解决了这个问题。

问题在于 iOS 和 Android 显然需要不同的字体名称。

我加载的 simple-line-icons 仅适用于 iOS 等 Android 我收到此错误： fontFamily 'SimpleLineIcons' 不是系统字体，尚未通过 Font.loadAsync 加载。

我最终加载了 simple-line-icons 和 SimpleLineIcons，指向同一个目录，如下所示：

componentDidMount() 
    this.loadAssetsAsync()
  

  loadAssetsAsync = async () => 
    await Font.loadAsync(
      amaticBold: require('./assets/fonts/amaticSC-Bold.ttf'),
      indieFlower: require('./assets/fonts/indieFlower.ttf'),
      'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf'),
      'SimpleLineIcons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf'),
      'simple-line-icons': require('@expo/vector-icons/fonts/SimpleLineIcons.ttf')
    )
    this.setState( fontLoaded: true )
  

  render() 
    const store = createStore(reducers, , applyMiddleware(ReduxThunk))

    if (!this.state.fontLoaded) 
      return <AppLoading />
    

    return (
      <Provider store=store>
        <Router />
      </Provider>
    )
  

这个公认的丑陋解决方案暂时解决了我的问题。 确保你真的像错误告诉你的那样输入。 如果错误是： fontFamily 'MyAwesomeFont' 不是系统字体... 那么你真的需要给它命名：

Font.loadAsync(
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
)

希望这对任何人都有帮助。

【参考方案2】：

我遇到了同样的问题，我发现将字体名称更改为您指定的名称可以解决问题：

// Before
'my-awesome-font': require('./path/to/my-awesome-font.ttf')

// After
'MyAwesomeFont': require('./path/to/my-awesome-font.ttf')

可能是破折号不能用。

【参考方案3】：

我遇到了同样的问题，并且在这个错误上浪费了很多时间。这是 2021 年，有更好的方法来做同样的事情，所以不要使用下面的代码

Font.loadAsync(
    'MyAwesomeFont': require('./path/to/MyAwesomeFont.ttf')
)

正确的做法是

import  useFonts  from 'expo-font';
import AppLoading from 'expo-app-loading';

  let [fontsLoaded] = useFonts(
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  );
  if (!fontsLoaded) 
    return <AppLoading />;
  

如果您想进一步解释，请查看官方文档here

【参考方案4】：

我在使用 @react-native-render-html 时遇到了这个错误，它正在渲染从其他 cms 生成的 Html，如果内容创建者使用自定义字体，这会导致字体系列问题。

为了解决这个问题，我在 html 渲染器中使用了 ignoredStyles 功能， 然后设置 baseFontStyle 以使文本内容具有统一的外观。

代码：

import HTML from "react-native-render-html"`

<HTML ignoredStyles=['fontFamily'] baseFontStyle=[fontFamily: 'nunito-regular', fontSize: 16] />

【参考方案5】：

如果您来自“网络忍者”，Tuto 就是解决方案

Home.js

import React,  useState  from 'react';
import StyleSheet, View, Text  from 'react-native';

export default function Home() 
    return (
        <View style=styles.container>
            <Text style=styles.titleText>Home Screen</Text>
        </View>
    );


// https://docs.expo.dev/guides/using-custom-fonts/
const styles = StyleSheet.create(
    container: 
        padding: 24,
    ,
    titleText:
        fontFamily: 'Nunito-Bold',
        fontSize: 24,
    
)

App.js

import  StatusBar  from 'expo-status-bar';
import React,  useState  from 'react';
import  StyleSheet, Text, View  from 'react-native';
import Home from './screens/home';

import  useFonts  from 'expo-font';
import AppLoading from 'expo-app-loading';

export default function App() 
  // const [fontsLoaded, setFontsLoaded] = useState(false);

  const [fontsLoaded] = useFonts(
    'Nunito-Regular': require('./assets/fonts/Nunito-Regular.ttf'),
    'Nunito-Bold': require('./assets/fonts/Nunito-Bold.ttf'),
  );

  if (!fontsLoaded) 
    return (
      <AppLoading />
    )
   else 
    return (
      <Home />
    );
  



const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
);