无法解析 React Native 中的 Font Awesome 模块

Question

我正在尝试按照此处发布的说明让 Font Awesome 图标运行我的 React Native 应用程序。但是，完成说明后，我的模拟器没有加载应用程序，命令行给了我以下错误：

error: bundling failed: Error: While trying to resolve module `@fortawesome/fontawesome-svg-core` from file `/Users/agaidis/Auto-ID-Lab/AudioApp/App.js`, the package `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js`. Indeed, none of these files exist:

  * `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
  * `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
    at ResolutionRequest.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:15)
    at DependencyGraph.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)
    at Object.resolve (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/lib/transformHelpers.js:116:25)
    at dependencies.map.result (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)
    at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)
    at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:467
 BUNDLE  [ios, dev] ../../index.js ???????????????? 0.0% (0/1), failed.

我的代码如下：

App.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import MainApp from './src/components/MainApp';
import AudioExample from './src/components/AudioExample';

// For icons we use font awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons';

library.add(faStroopwafel)

AppRegistry.registerComponent('audioApp', () => MainApp);

export default MainApp;

相关资料LangPage.js：

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {View, Text, StyleSheet, Picker} from 'react-native'
import PropTypes from 'prop-types'
import Menu from './Menu'

class LangPage extends React.Component{
    static propTypes = {
        List: PropTypes.array.isRequired,
        passFunc: PropTypes.func.isRequired,
    }
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.boxContainers}>
                    <FontAwesomeIcon icon="stroopwafel" />
                    <Text style={styles.header}>Select a Language</Text>
                </View>
                <View style={[styles.boxContainers, styles.menuBox]}>
                    <Menu givenL={this.props.List} selectFunc={this.props.passFunc}/>
                </View>
            </View>
            )
    }
}

作为参考，我正在使用：

"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-solid-svg-icons": "^5.1.0-11",
"@fortawesome/react-fontawesome": "0.1.0-11",
"i": "^0.3.6",
"npm": "^6.3.0",
"react": "16.4.1",
"react-native": "0.56.0"

关于如何解决这个问题的任何想法？谢谢！

Answer 1

早上好，

我强烈建议您使用该react-native-vectors-icons库而不是直接使用 fontAwesome。这可能就是它不起作用的原因。欲了解更多信息，请点击此处。

编辑：您需要在依赖项中导入react-native-vector-icons。进入您的package.json文件并在“依赖项”部分中键入以下行：

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

在您的LangPage.js文件中，您将能够像这样导入它们：

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

完成后，您将能够在 React Native 组件中轻松显示 font-awesome 的图标，就像这样：

<Icon
   color={Colors.primaryBackground}
   name={stroopwafel}
   size={40}
/>

希望它有帮助:)

祝你有美好的一天