6

我的应用程序使用 CRNA 和 Expo，我的问题是 Font.loadAsync() 异步函数在我的项目目录的 assets/fonts/ 文件夹中找不到 .otf 字体文件。我绝对确定目录和文件名是正确的。我收到此错误。

链接到我的错误屏幕的图像

这是我的代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo'
import Root from './js/Root';

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      fontLoaded: false
    }
  }

  async componentDidMount() {
    await Font.loadAsync({
      "Light": require('./assets/fonts/SemplicitaPro-Light.otf')
    })
    this.setState({ fontLoaded: true })
  }

  render() {
    if (!this.state.fontLoaded) {
      return <AppLoading />
    }
    return <Root />;
  }
}

这是我的 package.json：

    {
  "name": "Zumer",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "flow-bin": "^0.40.0",
    "jest-expo": "^0.4.0",
    "react-native-scripts": "0.0.28",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "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": "node node_modules/jest/bin/jest.js --watch",
    "flow": "flow"
  },
  "packagerOpts": {
    "assetExts": ["ttf", "otf"]
  },
  "jest": {
    "preset": "jest-expo",
    "tranformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ]
  },
  "dependencies": {
    "@expo/vector-icons": "^4.0.0",
    "expo": "^16.0.0",
    "native-base": "^2.1.2",
    "react": "16.0.0-alpha.6",
    "react-native": "^0.43.4",
    "react-native-elements": "^0.11.1",
    "react-navigation": "^1.0.0-beta.8",
    "react-redux": "^5.0.4",
    "redux": "^3.6.0",
    "redux-observable": "^0.14.1",
    "redux-persist": "^4.6.0",
    "rxjs": "^5.3.0"
  }
}

会不会是 Expo 不支持 .otf 文件格式？

4

2 回答 2

4

我有一个类似的问题，我能够通过删除需要字体源的键周围的引号来解决它。

前：

await Font.loadAsync({
  "Light": require('./assets/fonts/SemplicitaPro-Light.otf')
})

后

await Font.loadAsync({
  Light: require('./assets/fonts/SemplicitaPro-Light.otf')
})

并像这样在样式表中使用它

const styles = StyleSheet.create({
   text: {
      fontFamily: 'Light'
   }
});

之后一切正常。

于 2018-01-07T04:12:55.950 回答
3

我通过将otf文件转换为ttf

于 2017-06-12T14:39:32.770 回答