Question

我正在尝试通过遵循instructions posted here来运行我的React Native应用程序的Font Awesome图标。但是，完成说明后，我的模拟器无法加载应用程序，并且命令行给我以下错误：

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-vector-icons需要通过运行来链接

!python script.py

或按照自述文件中的manual linking example。

您可以通过检查以下文件来检查链接是否正常工作；

Android：

react-native link react-native-vector-icons

iOS：

android/app/src/main/java/.../MainApplication.java
android/settings.gradle
android/app/build.gradle

我可能错过了一些文件，但是这些应该是主要文件。

如果您使用过ios/<APP_NAME>/Info.plist ios/<APP_NAME>/<APP_NAME>.xcodeproj/project.pbxproj并且有一个尚未退出的expo项目，那么我建议使用expo vector-icons软件包。

希望这会有所帮助。

Answer 2

正义：

npm我-保存@ fortawesome / react-native-fontawesome

Answer 3

早上好

我强烈建议您使用<console>:28: error: not found: value userId userId.show(false)库，而不是直接使用fontAwesome。这可能是为什么它不起作用的原因。有关更多信息，请单击here。

编辑：您需要在依赖项中导入react-native-vector-icons。进入您的react-native-vectors-icons文件，然后在“依赖项”部分中输入以下行：

package.json

在您的"react-native-vector-icons": "^4.5.0",文件中，您可以像这样导入它们：

LangPage.js

完成后，您将能够在响应本机组件中轻松显示超棒的图标，就像这样：

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

希望对您有所帮助：）

祝你有美好的一天

Answer 4

删除库

“ react-native-linear-gradient”：“ ^ 2.5.6”，

“ react-native-vector-icons”：“ ^ 4.5.0”，

然后重新加载（cmd+R）应用

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

4 个答案: