本机反应:无法解析"@ant-design/icons-react-native/fonts/antoutline.ttf“

Question

我在使用appeared组件(https://rn.mobile.ant.design/)时遇到了一些小问题，但是当我试图加载ant设计字体时，出现了一个错误。赛义德

无法从“"@ant-design/icons-react-native/fonts/antoutline.ttf”“解析App.js

。

守则：

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

}

我在用世博会作为借口

Answer 1

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

从他们的安装指令中可以看到以下内容：

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

由于您的应用程序是用世博制作的，并且本机代码是从您身边抽象出来的，所以不可能使用链接命令。

你的选择是：

1. 使用expo eject弹出您的世博会项目。这将使您完全访问本机代码。您可以阅读更多关于它的这里。
2. 世博会配有内置的AntDesign图标，您可以使用@expo/vector-icons访问它们。在文档这里中还有更多内容。

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

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

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

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

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

确保检查您想要的图标是否可用在目录中

如果你想预加载你的字体。字体对象作为字体组件上的静态属性可用，因此在上面的例子中，它是AntDesign.font，它应该计算成类似于{antdesign: require('path/to/antdesign.ttf')}的东西。

世博会网站上的字体和图标上的文档都是很好的例子。