React native @从子文件夹运行时未加载expo/vector图标

我正在尝试在monorepo设置中使用expo的

创建react native app

。当我从子文件夹

app/

启动应用程序并导入

@expo/vector icons

时，我得到一个错误，即缺少字体系列

"fontFamily" 'material' is not a system font and has not been loaded 
through Expo.Font.loadAsync.

如果我在主

src/

文件夹中启动应用程序，图标加载良好

我已经对我的

rn cli.config.js

进行了配置，以便该应用程序能够针对其他依赖项进行编译和运行。我的项目是像monorepo一样设置的，这样我可以在repo中有多个本机应用程序

src/
  MainApp.js
  package.json
  app/App.js 
  app/app.json
  app/package.json
  app/rn-cli.config.js
  ...

我试过几件事都没用：

• 在package.json子文件夹中安装

  @expo/vector icons

• 在

  app.json

  文件中设置

  “assetExts”：[“ttf”]

我的代码（主要来自一个全新的

create react原生应用程序

）：

app/app.js

export { default } from "../MainApp";

app/app.json

{
  "expo": {
    "sdkVersion": "22.0.0",
    "react": "16.0.0-beta.5"
  }
}

app/package.json

{
  "private": true,
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "native": "react-native-scripts start"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.2.1",
    "expo": "^22.0.0",
    "react-native": "^0.49.0",
    "react-native-scripts": "1.7.0"
  }
}

{
  "name": "react-native-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.7.0"
  },
  "scripts": {
    "native": "cd app && yarn native"
  },
  "dependencies": {
    "@expo/vector-icons": "^6.2.1",
    "expo": "^22.0.0",
    "react": "16.0.0-beta.5",
    "react-native": "^0.49.0"
  }
}

app/rn-cli.config.js

const blacklist = require("metro-bundler/src/blacklist");
const path = require("path");

const roots = [process.cwd(), path.resolve(__dirname, "..")];

const config = {
  getProjectRoots: () => roots,

  /**
   * Specify where to look for assets that are referenced using
   * `image!<image_name>`. Asset directories for images referenced using
   * `./<image.extension>` don't require any entry in here.
   */
  getAssetRoots: () => roots,

  /**
   * Returns a regular expression for modules that should be ignored by the
   * packager on a given platform.
   */
  getBlacklistRE: () =>
    blacklist([
      // Ignore the local react-native so that we avoid duplicate modules
      /\/app\/node_modules\/react-native\/.*/
    ])
};

module.exports = config;

MainApp.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <MaterialIcons name="search" color="black" size={32} />
        <MaterialIcons name="location-searching" color="black" size={32} />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
从“反应本机矢量图标/唯物主义者”导入唯物主义者；
导出默认类App扩展React.Component{
render（）{
返回(
打开App.js开始使用你的应用程序！
您所做的更改将自动重新加载。
摇动手机以打开开发者菜单。
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
});

我对react native很陌生，但我有一个类似的问题，我通过根本不安装世博会图标并正常使用它们来解决。所以在我的package.json中

 "react-native-vector-icons": "^4.4.2",

我导入的字体如下：

import Icon from 'react-native-vector-icons/FontAwesome';

---

我打赌这不是一个完美的解决方案，但由于世博会只是一个让事情变得更简单的工具，我并不觉得做一些有效的事情很糟糕，而不是使用另一个工具，这会使事情变得复杂；）

我对react native很陌生，但我有一个类似的问题，我通过根本不安装世博会图标并正常使用它们来解决。所以在我的package.json中

 "react-native-vector-icons": "^4.4.2",

我导入的字体如下：

import Icon from 'react-native-vector-icons/FontAwesome';

---

我打赌这不是一个完美的解决方案，但由于世博会只是一个让事情变得更简单的工具，我并不觉得做一些有效的事情很糟糕，而不是使用另一个工具，这会使事情变得复杂；）

问题似乎在于我有两个不同的世博模块。去掉子文件夹中的一个使它工作。

似乎问题在于我有两个不同的expo模块。删除子文件夹中的一个文件后，它就可以工作了。

我的expo版本是“expo”：“^32.0.0”。您所需要做的就是添加支持react原生矢量图标组的字体系列，如AntDesign、MaterialIcons、FontAwesome等

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

<FontAwesomeIcon name="circle" size={10} color="#FF6859" style={{ marginLeft: 5 }} />

从'react native vector icons/FontAwesome'导入FontAwesomeIcon；

您还可以在

中找到图标。我的世博会版本是“世博会”：“^32.0.0”。您所需要做的就是添加支持react原生矢量图标组的字体系列，如AntDesign、MaterialIcons、FontAwesome等

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';

<FontAwesomeIcon name="circle" size={10} color="#FF6859" style={{ marginLeft: 5 }} />

从'react native vector icons/FontAwesome'导入FontAwesomeIcon；

您还可以从中找到图标