React Native 当我从'@expo/vector-icons'导入{ Ionicons }时出现错误;

ui7jx7zq  于 2023-02-13  发布在  React
关注(0)|答案(2)|浏览(105)

代码未显示错误:

import { View, SafeAreaView, Image, TextInput, Button, Text, StyleSheet } from "react-native";
import { IonIcon } from '@ionic/react';
import { addOutline } from 'ionicons/icons';

export default function signIn(){
  const UI = (
    <SafeAreaView style={styels.createNewProfile}>
      <View>
        <IonIcon slot="addOutline" icon={addOutline}></IonIcon>
      </View>
    </SafeAreaView>
  );
  return UI;
};

const styels = StyleSheet.create({
  createNewProfile: {
    flex: 1
  },
  AppProfilePicture: {
    width: 100,
    height: 100
  }
});

但是在我用npx react-native run-android命令在windows上运行android应用程序的代码之后
错误消息为:

Error: node_modules\@stencil\core\internal\client\index.js:Invalid call at line 3229: import(
/* @vite-ignore */
/* webpackInclude: /\.entry\.js$/ */
/* webpackExclude: /\.system\.entry\.js$/ */
/* webpackMode: "lazy" */
"./" + bundleId + ".entry.js" + (require("@stencil/core/internal/app-data").BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''))
    at transformJS (D:\react-native-practice\app1\node_modules\metro-transform-worker\src\index.js:237:15)
    at transformJSWithBabel (D:\react-native-practice\app1\node_modules\metro-transform-worker\src\index.js:372:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (D:\react-native-practice\app1\node_modules\metro-transform-worker\src\index.js:518:12)

我刚刚尝试import Icon from 'react-native-ionicons'这个库...它没有显示任何错误,但它没有输出任何图标:
app.tsx:

import React from "react";
import { SafeAreaView, View, Text, TextInput } from "react-native";
import Icon from 'react-native-ionicons'

const IconBar = () => (
  <View>
    <Icon name="add-outline" size={10}/>
  </View>
)

export default IconBar;
xe55xuns

xe55xuns1#

检查您的package.json,为我检查"react-native-vector-icons": "^9.2.0",
我需要在顶部添加导入:

import Ionicons from "react-native-vector-icons/Ionicons";

加载字体:

Ionicons.loadFont();

在所有导入之后的第一行。
祝你的项目好运!

mrphzbgm

mrphzbgm2#

你可以利用它的工作方式

import React from 'react';
import Ionicons from '@expo/vector-icons/Ionicons';

export default class IconExample extends React.Component {
  render() {
    return <Ionicons name='rocket' size={32} color='green' />;
  }
}

相关问题