reactjs - react native : Unable to resolve "@ant-design/icons-react-native/fonts/antoutline.ttf"

Question

我在使用 React Native 时遇到了一些问题，我正在使用 ant design RN 来实现 UI 组件 ( https://rn.mobile.ant.design/ ) 但是当我尝试加载ant design字体时，出现了错误。它说

"Unable to resolve "@ant-design/icons-react-native/fonts/antoutline.ttf" from "App.js"

.

代码:

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

包.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

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

来自他们的installation您可以看到以下说明:

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

由于您的应用程序是使用 Expo 制作的，并且 native 代码已从您那里抽象出来，因此无法使用链接命令。

<小时/>

您的选择是:

1. 使用 expoject 弹出您的 Expo 项目。这将使您能够完全访问 native 代码。您可以阅读更多相关信息here .
2. Expo 内置了 AntDesign 图标，您可以使用 @expo/vector-icons 访问它们。文档 here 中有更多内容.

<小时/>

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

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

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世博会网站上有很多很棒的例子。