时间戳

首页 > 解决方案 > 安装后反应本机矢量图标导致错误

android - 安装后反应本机矢量图标导致错误

问题描述

我已经安装react-native-vector-icons并从他们在 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)

谁能帮我理解为什么会发生这种情况以及如何解决它？谢谢

标签： androidreactjsreact-native

解决方案

当您在组件中导入库名称时，您需要定义库名称：

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/

推荐阅读