Question

我对React Native有点问题，我将UI组件（https://rn.mobile.ant.design/用于ant设计RN 但是，当我尝试加载蚂蚁设计字体时，出现了错误。它说

”无法解决来自“ App.js”的“ @ ant-design / icons-react-native / fonts / antoutline.ttf”

。

代码：

async componentDidMount() {
    await Font.loadAsync({
      antoutline: require("@ant-design/icons-react- 
            native/fonts/antoutline.ttf")
     })
  }

Package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
},
"dependencies": {
    "@ant-design/icons-react-native": "^1.0.2",
    "@ant-design/react-native": "^3.1.3",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
},
"devDependencies": {
    "babel-preset-expo": "^5.0.0"
},
"private": true

}

我正在使用Expo作为cli

Answer 1

不幸的是，您正在尝试使用需要链接本机代码的依赖项。

从他们的installation说明中，您可以看到以下内容：

react-native link @ant-design/icons-react-native

由于您的应用是使用Expo构建的，并且本机代码已被抽象出来，因此无法使用link命令。

您的选择是：

使用expo eject退出Expo项目。这将使您可以完全访问本机代码。您可以详细了解here。
Expo内置有AntDesign图标，您可以使用@expo/vector-icons访问它们。 here文档中还有更多内容。

最简单的选择是使用@expo/vector-icons的 2 。您不需要安装任何东西即可使用它们。

只需将以下导入添加到您的组件

import { AntDesign } from '@expo/vector-icons';

然后在渲染中，您可以通过以下方式使用它们：

<AntDesign name="stepforward" size={32} color="green" />

确保检查所需图标是否可用in the directory

如果要预加载字体。字体对象可作为字体组件上的静态属性使用，因此在上述情况下为AntDesign.font，其结果应类似于{antdesign: require('path/to/antdesign.ttf')}

世博网站fonts和icons上的文档中有很多很好的例子。

React native：无法解析“ @ ant-design / icons-react-native / fonts / antoutline.ttf”

1 个答案: