@expo/vector-icons从子文件夹运行时未加载

我正在尝试将create-react-native-app与MonorePo设置中的Expo一起使用。当我从子文件夹app/启动该应用程序并导入@expo/vector-icons时，我会发现字体系列丢失的错误。

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

如果我在主src/文件夹中启动该应用程序，则图标fielt。

我已经配置了我的rn-cli.config.js，因此该应用程序对其他依赖关系进行了编译并运行良好。我的项目像monorepo一样设置，因此我可以在存储库中拥有多个本机应用。

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

我已经尝试了几件事是无济于事的：

subfolder软件包中安装 @expo/vector-icons
在app.json文件中设置"assetExts": ["ttf"]。

我的代码（主要来自新鲜的creat-react-native-app）：

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"
  }
}

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;

package.json

{
  "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"
  }
}

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"
  }
});

我对反应的新手很新，但是我也有一个类似的问题，即我完全不安装世博图标并正常使用它们来解决。所以在我的包裹中。json我有

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

我导入字体，例如：

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

我敢打赌，这不是完美的解决方案，但是由于博览会只是使事情变得更容易的工具，所以我不会对做一些有效的事情而不是使用其他工具，而使事物复杂化；）

似乎是我有两个不同的博览会模块。摆脱子文件夹中的一个使它起作用。

我的博览会版本是" expo"："^32.0.0"。您需要做的就是添加您的字体家族，该家族支持反应新的矢量群体，例如Antdesign，Motitalicons，Fontawesome等。

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
<FontAwesomeIcon name="circle" size={10} color="#FF6859" style={{ marginLeft: 5 }} />

您还可以从https://expo.github.io/vector-icons/

找到图标。

相关内容

最新更新

热门标签：