我刚刚使用此命令安装了React Native vector icons:
npm install react-native-vector-icons
但是如果我在index.android.js中使用它
<Icon name="ios-add" size={30} color="#4F8EF7" />
我得到一个正方形,中间有一个X而不是图标。
为什么?
编辑:
如果我尝试使用“npm install react-native-vector-icons --save”安装它,那么我会收到此错误:
C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons --save
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-native-vector-icons" "--save"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! path C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
npm ERR! at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
npm ERR! at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm ERR! at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
npm ERR! at Error (native)
npm ERR! { Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
npm ERR! at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
npm ERR! at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm ERR! at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
npm ERR! at Error (native) parent: 'AwesomeProject' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\xrobot\Desktop\React Native\AwesomeProject\npm-debug.log
C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons
AwesomeProject@0.0.1 C:\Users\xrobot\Desktop\React Native\AwesomeProject
`-- react-native-vector-icons@4.0.0
编辑2:
C:\Users\xrobot\Desktop\React Native\AwesomeProject>react-native link react-native-vector-icons
rnpm-install info Linking react-native-vector-icons android dependency
rnpm-install info Android module react-native-vector-icons has been successfully linked
rnpm-install info Linking react-native-vector-icons ios dependency
rnpm-install info iOS module react-native-vector-icons has been successfully linked
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project
编辑3:
我已从物理设备中移除了应用程序,然后重新构建它(正如QMFNP所说)。现在它可以工作
答案 0 :(得分:10)
首先,确保通过执行以下操作来保存项目中的依赖项:
npm install react-native-vector-icons --save
。必须包含--save
,否则react-native link
无法找到该模块。
在iOS或Android项目中使用它们之前,还必须链接本机模块。快速执行此操作的方法是使用以下命令:
react-native link react-native-vector-icons
如果由于任何原因您使用react-native link
链接原生模块时遇到问题,react-native-vector-icons
README也会提供有关在Android和iOS上手动关联它们以及集成库的详细说明在网上也是如此。
答案 1 :(得分:4)
也许您没有正确导入库,您必须指定一系列您想要使用的图标。
我认为您使用的图标名称与您正在搜索的图标不对应。
例如,如果您将使用材质图标,则导入将为:
import Icon from 'react-native-vector-icons/MaterialIcons';
并将名称更改为name={add}
如果您不想使用材料图标,请尝试寻找其他图标系列。
答案 2 :(得分:1)
您可以使用:
icon = {"<"Icon name='lock'/>}
或:
icon = {{ type:'font-awesome',name:'lock'}}
在任何React本机组件属性中。
答案 3 :(得分:1)
步骤1: 安装react-native-element:
import pandas as pd
from pandas.io import sql
from sqlalchemy import create_engine
engine = create_engine("mysql://root:DTULab@123@localhost/Afgangsprojekt?host=localhost?port=3306")
connection = engine.connect()
Query = "<Query Here>"
df = pd.read_sql(Query, connection)
print(df.head(50)) # For 50 Rows to be printed
第2步:安装react-native-vector-icons 从npm安装
npm install react-native-elements --save
链接
npm install react-native-vector-icons --save
之后,您可以通过以下方式在页面中使用它: 步骤1:
react-native link react-native-vector-icons
第2步:
import { Icon } from 'react-native-elements';
答案 4 :(得分:0)
完整的更新答案,只需执行以下步骤:-
npm install react-native-vector-icons --save
react-native link
react-native link react-native-vector-icons
使用其中一种(根据您的要求)导入Icon
MaterialCommunityIcons
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
离子
import Icon from 'react-native-vector-icons/Ionicons';
FontAwesome5
import Icon from 'react-native-vector-icons/FontAwesome5';
使用(JSX)
<Icon size={24} color="white" name="movie" />
答案 5 :(得分:0)
我认为这可能会有所帮助,至少这是我每次必须做的。在Project/android/app/build.gradle
中,添加以下行:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
答案 6 :(得分:0)
按照此步骤手册操作 https://github.com/oblador/react-native-vector-icons#option-manually-1
这可能有助于某些人安装带有 cmd 的 react native 矢量图标并遵循每个手动步骤,但保留位于 android>app>src>main>java>com>youApplication>mainApplication.java 的 mainApplication.java 如果您运行 auto linkng 命令,请将其注释掉 反应本机链接反应本机矢量图标 //导入 com.oblador.vectoricons.VectorIconsPackage; // 还不能自动链接的包可以在这里手动添加,例如: // package.add(new MyReactNativePackage()); //packages.add(new VectorIconsPackage()); 并为我重建您的应用程序这项工作我能够找到它总共超过 10 小时