Question

我已安装react-native-vector-icons，并从their docs on Github安装了npm install <pkg_name>

并对我的android/app/build.gradle文件进行了更改

project.ext.react = [
entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

//start my changes
project.ext.vectoricons = [
     iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]

从以下位置应用：“ ../../ node_modules / react-native-vector-icons / fonts.gradle” //结束我的更改

在App.js中，我已经在下面完成了此视图：

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

type Props = {};
export default class App extends Component<Props> {
   render() {
      return (
          <View style={styles.container}>
              <View style={styles.navbar}>
                  <Image source={require('./images/logo.png')}
                         style={{width: 98, height: 22}}/>
                  <View style={styles.rightNav}>
                      <Icon name='search' size={25}/>
                  </View>
              </View>
          </View>
      );
  }
 }

但是当我尝试运行react-native run-android时，应用程序崩溃了。仅在安装此软件包后才发生这种情况。以下是崩溃报告：

D:\ReactNativeDev\YouTubeUI\youtubeui>react-native run-android
internal/modules/cjs/loader.js:573
   throw err;
   ^

Error: Cannot find module 'asap/raw'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (D:\ReactNativeDev\YouTubeUI\youtubeui\node_modules\promise\lib\core.js:3:12)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Module._compile (D:\ReactNativeDev\YouTubeUI\youtubeui\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Object.newLoader [as .js] (D:\ReactNativeDev\YouTubeUI\youtubeui\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:589:32)

有人可以帮助我了解为什么会这样以及如何解决吗？谢谢

Answer 1

在将组件导入组件内部时，您需要定义库名称：

import Icon from 'react-native-vector-icons/MaterialIcons'; or 
import Icon from 'react-native-vector-icons/EvilIcons';

然后像这样使用它：

 <View style={styles.container}>
              <View style={styles.navbar}>
                  <Image source={require('./images/logo.png')}
                         style={{width: 98, height: 22}}/>
                  <View style={styles.rightNav}>
                      <Icon name='search' size={25}/>
                  </View>
              </View>
          </View>

您可以在此处根据其库检查所有可用图标： https://oblador.github.io/react-native-vector-icons/

安装后反应本地矢量图标导致错误

1 个答案: