如何将react-native-vector-icons与react-native-web一起使用？
将react-native-vector-icons与react-native-web一起使用的方法如下：
- 首先，确保你已经在项目中安装了react-native-vector-icons和react-native-web。
- 在项目的根目录下，创建一个名为
react-native.config.js的文件，并添加以下内容：
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./node_modules/react-native-vector-icons/Fonts'],
};这将告诉React Native在构建过程中将字体文件包含在项目中。
- 在项目的根目录下，创建一个名为
babel.config.js的文件，并添加以下内容：
module.exports = function(api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
alias: {
'react-native-vector-icons': 'react-native-vector-icons/dist',
},
},
],
],
};
};这将确保React Native在解析react-native-vector-icons模块时使用正确的路径。
- 在你的React Native组件中，导入所需的图标并使用它们。例如：
import React from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const MyComponent = () => {
return (
<View>
<Icon name="rocket" size={30} color="#900" />
</View>
);
};
export default MyComponent;这将在你的React Native应用中使用FontAwesome图标。
- 现在，你可以使用
react-native-web来在Web平台上渲染React Native组件。确保你已经按照官方文档的指导将React Native组件转换为Web组件。
通过以上步骤，你就可以成功地将react-native-vector-icons与react-native-web一起使用了。
请注意，腾讯云并没有提供与此问题直接相关的产品或服务。
相关·内容
构建react-native-web时，出现以下错误： ERROR in ./node_modules/react-native-vector-icons/lib/create-icon-set.js 43:21
Module parse failed: Unexpected token (43:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/
浏览 10提问于2019-06-25得票数 2
我使用ReactiNative0.68.1和Reactive18，升级后得到了这个错误：
它可以很好地处理表示组件，但是一旦我从“react”切换到一个具有连接功能的智能组件，它就会抛出上述错误。
我的包裹：
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.68.1",
"react-native-paper": "^4.12.0",
"re
浏览 1提问于2022-04-23得票数 2
我们正在用react-native开发一个使用react-native-paper的组件，因为这也可以在web上工作，我们希望使用storybook能够创建基本的示例，这些示例也可以在浏览器上测试。
但问题是我们得到了以下错误，这些错误不是由我们决定的，而是由我们使用的库决定的。
正如您在下面的错误中看到的，该组件似乎加载了数据。
有人知道如何帮助我们了解确切的错误是什么(在情况下也如何解决它)，还联系指定的模块以纠正它们。
"dependencies": {
"react": "16.13.1",
"react
浏览 15提问于2020-12-20得票数 2
我遵循这个将react-native-web添加到react-native项目中。但我在将react-native-vector-icons添加到项目中时出错。
./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/hamidreza/Desktop/myApp/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classPro
浏览 16提问于2020-06-07得票数 3
回答已采纳
我已经用react-native和react-native-web设置了monorepo项目。我在Android，iOS和网络上分享了相同的代码库。安装react-native-vector-icons后，我在所有三个平台上都运行了代码，它在安卓和iOS上运行得很好，但在网页上就不行了。在web中，它看起来如下所示：
我已经按照描述设置了Webpack
下面是我的Webpack配置config-overrides.js
const fs = require('fs');
const path = require('path');
const webpa
浏览 57提问于2020-02-17得票数 4
回答已采纳
我从本例iOS中为Web、Android和构建了一个跨平台的monorepo应用程序，当我将React添加到我的项目中时，我根据Web指南更改了自己的config-overrides.js
但在那之后，我得到了SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classP
浏览 0提问于2019-08-03得票数 4
当我试图将react-native-vector-icon与使用react-native-web的一起使用时，我得到了
目前还没有启用对实验性语法“classProperties”的支持
我尝试过以下解决方案，但没有一个是为我工作的。
我的package.json
{
"name": "react-webiste",
"version": "0.1.0",
"private": true,
"dependencies": {
"axi
浏览 5提问于2020-04-24得票数 1
回答已采纳
我正在storybook上开发一个react原生组件，它使用react- native -paper和react-native-vector-icons。 问题是我看不到图标，我试着按照react-native-vector-icons的指南操作，这是：webpack 下面是webpack，但我不太明白如何使用指南中建议的代码的第二部分，我应该在哪里使用它以及如何使用它。 有人能帮我吗？ ? webpack： const path = require('path')
const HTMLWebpackPlugin = require('html-webpack
浏览 27提问于2021-01-26得票数 0
2回答
我正在制作一个应用程序与反应-本地和反应-本土-网站。我尝试在项目中添加react-本机-矢量-图标，遵循这个，我在web构建中得到了一个错误：
ERROR in ./node_modules/react-native-vector-icons/lib/create-icon-set.js 91:8
Module parse failed: Unexpected token (91:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to proc
浏览 22提问于2022-06-14得票数 1
1回答
我有react native和react native web项目，我想使用react native元素，但在将react native元素添加到项目中时出现错误。
./node_modules/react-native-elements/src/avatar/Avatar.js
SyntaxError: /home/hamidreza/Desktop/reactElement/node_modules/react-native-elements/src/avatar/Avatar.js: Unexpected token (72:4)
70 |
71 | const Util
浏览 23提问于2020-06-07得票数 2
回答已采纳
世博会更新后，我的项目不起作用了
错误是：
Failed building JavaScript bundle.
node_modules\react-native-gesture-handler\src\index.ts: [BABEL] D:\data\Anonymous\ReactNative\test\node_modules\react-native-gesture-handler\src\index.ts: You gave us a visitor for the node type TSInstantiationExpression but it's not a val
浏览 20提问于2022-05-21得票数 12
我刚开始使用react native和firebase，我遇到了这样的错误："TypeError: Cannot read property 'auth‘of undefined“ 我继续将我的代码附加到图像中： ? 我还继续复制和粘贴依赖项： "dependencies": { “@react-native-community/masked view”："0.1.10"， “@react导航/底部选项卡”："~5.2.6"， “@反应导航/本机”："~5.1.5"， “@react-导航/堆栈”
浏览 10提问于2021-10-13得票数 1
回答已采纳
1回答
我正在尝试创建一个项目。
我已经建立了几个反应本土的应用程序，但从来没有尝试把一个在网上。
我最大的问题是在启动web时本地库之间的不兼容性--这不是一个意想不到的问题。
无论如何，我的目标是能够在本地平台上加载本地库，而在web上让其他库做同样的事情。
例如，我得到了当前的错误：
./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
Module parse failed: Unexpected token (11:8)
You may need an appropriate lo
浏览 3提问于2020-04-10得票数 3
回答已采纳
我让一切正常工作，直到我实现了Stack.Navigator；然后我得到了这个错误
这是我的stack.navigator：
<NavigationContainer>
<Stack.Navigator initialRouteName="Auth" screenOptions={{headerShown: false}} >
<Stack.Screen name="Register" component={Register} />
<Stack.Sc
浏览 6提问于2022-11-09得票数 0
我正在尝试用以下代码向我的堆栈导航器标题添加一个菜单类型的图标： import React, { Component } from 'react';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import Home from '../HomeComponent';
import Button from 'react-native';
import {Icon} from 'react-native-vector
浏览 12提问于2020-07-21得票数 0
我不断地发现错误：
Animated node with tag 1 does not exists
Im事件不是在我的代码中使用动画标记，所以为什么我会得到这个错误。
这是我的package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --androi
浏览 2提问于2021-03-28得票数 6
回答已采纳
当我按照的指示
并运行应用程序，我有以下错误
需要模块"node_modules/react-native-gesture-handler/index.js"，，该模块引发异常: TypeError：
"dependencies": {
"react": "^16.8.6",
"react-art": "^16.6.3",
"react-dom": "16.8.6",
"react-native": "^
浏览 1提问于2019-06-01得票数 0
回答已采纳
有了新的react导航v5，它就不可能与react-native-web一起使用了。仅仅导入createBrowserApp就会抛出错误 import {createBrowserApp} from "@react-navigation/web"; 在@反应导航/web/dist/Link.js中显示以下错误 TypeError: (0 , _core.withNavigation) is not a function 有没有人知道如何在react-native- v5中使用react导航web？我需要路径中的url历史，但现在它已经变得不可能了。
浏览 23提问于2020-04-25得票数 2
Package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"ej
浏览 5提问于2020-10-15得票数 0
我正在制作一个react原生应用程序，有一个错误让我很难受。 有人能帮帮我吗？ 错误如下所示。 ? ? 依赖关系： {
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
浏览 10提问于2020-10-18得票数 0
回答已采纳
问题：
我已经在那里创建了一个tab本机应用程序，我正在使用tab导航-选项卡模块。但它造成了一个错误，上面写着。
无法从"node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js解析“反应-本机-恢复”。
这是我的package.json文件。
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start"
浏览 1提问于2019-09-26得票数 3
我正在使用世博34.0.1作为反应本土发展。我在项目中使用TypeScript，并在带有jest的测试脚本中运行tsc --project . --noEmit。这将导致以下错误：
node_modules/@expo/vector-icons/build/createIconSet.d.ts:2:55 -错误TS7016:找不到模块'./vendor/react-native-vector-icons/lib/create-icon-set'.的声明文件'../node_modules/@expo/vector-icons/build/vendor/react-na
浏览 0提问于2019-08-31得票数 3
回答已采纳
我正在尝试呈现来自https://github.com/wix/react-native-calendars的日历 我收到一个编译失败的错误： ./node_modules/react-native-calendars/src/expandableCalendar/asCalendarConsumer.js
Module parse failed: Unexpected token (11:8)
You may need an appropriate loader to handle this file type.
| render() {
| return (
|
浏览 19提问于2020-04-15得票数 2
好了，我正在拼命地安装react-native-web的一个分支，它有一个功能正常的ListView组件。，具体地说。
我将其安装到项目目录中，如下所示：npm install --save react@0.14 react-dom@0.14 https://github.com/IjzerenHein/react-native-web/tarball/feaure-listview2
直接从react-native-web安装似乎没有这个问题。
这是index.web.js的样子：
import React from 'react'
import {
AppRegistry
浏览 0提问于2016-06-25得票数 2
回答已采纳
1回答
在安装expo图像选择器之前，该构建运行良好。但是，即使在移除包后，它现在也不起作用。
这是build命令。
eas build -p android --profile preview2
android和ios的构建都失败了。这看起来像是图像错误，我从我的应用程序中删除了所有的图像，但是问题仍然存在。
这是我的package.json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "
浏览 8提问于2022-05-29得票数 1
我刚开始对当地人做出反应，我有这样的问题:不变的违反：ListView已经从ReactiveNative.中删除了。
我甚至不会在我的项目中使用ListView，我会和你分享我的package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios"
浏览 1提问于2020-04-02得票数 0
3回答
我运行npm start或expo start -c来从空缓存开始，到目前为止还不错，但是当我尝试运行android模拟器时，我得到了下面的错误
无法从“"react-native-paper/lib/typescript/src/components/MaterialCommunityIcon”“解析JavaScript包的无法构建JavaScript包.
我试过删除node_modules，更新博览SDK，就像其他几个尝试过的一样，但是到目前为止还没有.
这是我的package.json
{
"main": "node_modules/expo/AppE
浏览 1提问于2020-05-17得票数 1
2回答
所以我试着使用原生基地的Solito初学者：
这是我第一次尝试与Next合作，我正试图获得世博会的形象支持。
根据世博会文件：
我应该能够使用next-image，我正在这样做：
const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
module.exports = withNativebase(
withImages({
dependencies: [
'@expo/
浏览 5提问于2022-07-27得票数 6
我正在尝试使用Storybook，带有expo和react-native-web。每当我尝试使用expo模块时，我都会得到以下错误
ERROR in ./node_modules/expo-linear-gradient/build/LinearGradient.js
Module not found: Error: Can't resolve './NativeLinearGradient' in '/Fleyver/front/node_modules/expo-linear-gradient/build'
@ ./node_modules/exp
浏览 32提问于2019-08-12得票数 2
我正在使用。我想使用
但它在android屏幕上没有显示任何东西(我正在expo应用程序上查看它)
下面是我所做的：
App.js：
const Courses = TabNavigator({
ReactCourses: { screen: ReactCourses },
NativeCourses: { screen: NativeCourses },
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
swipeEnabled: true,
showIcon:true,
浏览 3提问于2017-04-30得票数 1
回答已采纳
使用create-react-app启动了一个项目。已安装react-native："^0.57.8“、react-native-elements："^0.19.1”和react-native-vector-icons："^6.1.0“。能够在项目中使用react-native-elements中的组件。 当我运行npm start时，我得到下面粘贴的错误代码。我已经通读了react-native-element文档，但似乎找不到任何对我有帮助的东西 ./node_modules/react-native-elements/src/avatar/Avatar.js
浏览 6提问于2019-01-15得票数 11
1回答
在启动命令npm run eject之后，我遵循以下步骤：
bare :我想要一个原始项目。我设置了应用程序和xcode项目的名称
在此之后，命令将消息Ejected successfully!返回到ios生成的文件夹中，运行命令pod install，结果是Pod installation complete!
执行此过程后，我尝试使用ios模拟器运行应用程序，但有以下错误：
世博会SDK要求世博会运行。似乎本机世博模块不可用，并且此代码不在世博上运行。访问，了解有关开发世博会项目的更多信息。
注意，在执行npm run eject命令之前，应用程序工作正常。
这是package.json
浏览 3提问于2019-09-18得票数 2
我对编码很陌生，我找不出一个问题。当我使用命令在expo中打开一个应用程序时
expo start -c
我的菜单上有中文符号。然后会弹出一个红色屏幕，并发出以下通知：
console.error: fontFamily "AntDesign“不是系统字体，也没有通过FontloadAsync加载。
我在谷歌上搜索了这个问题，我看到人们从2个文件中上传代码，以获得帮助。App.js和package.json.所以我就这么做了。
App.js
import React from 'react';
import { Asset } from 'expo-asset
浏览 1提问于2020-08-30得票数 1
package.json
{
"main": "node_modules/expo/AppEntry.js",
"homepage": "<My URL>",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
浏览 5提问于2020-07-02得票数 5
我正在尝试让底部的标签导航器来显示Vue Native的图标。 我是编程新手，对我来说理解一些Vue native和React native语法是如何工作的有点困惑。我在网上到处搜索，想找到我需要的信息。 我确实在React Native官方网站上找到了一些信息。Vue native官方网站并没有包含这么多关于这方面的详细信息。 所以，我的问题是，我如何让它工作？当我尝试执行下面的代码时，它显示了一个错误代码。 提前感谢你的帮助:) // Chris 我在下面留下了一些代码片段： <template>
<app-navigator></app-navigat
浏览 12提问于2019-12-27得票数 1
之前一切都很正常，但图标没有显示为带有X的方框，我得到了这个错误：
fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom fon
浏览 3提问于2021-03-05得票数 1
我希望在react-native-web上使用https://github.com/xgfe/react-native-datepicker，但我认为它不兼容。
是否有其他库提供与react-native-web兼容的本机datepicker外观
浏览 26提问于2018-12-12得票数 11
1回答
我有一个react-native项目，它可以完美地在安卓和iOS上运行，我知道react-native应用程序可以在平台移动和网络上运行。那么，我如何在Web上运行当前的代码，或者如何将当前的移动应用程序转换为web应用程序。
我已经安装了react-dom，react-native-web，但是我没有得到任何成功。
浏览 1提问于2019-08-08得票数 0
我制作了一个名为“react原生-每周日历”的自定义组件，我试图将它发布到开源社区，但我想先测试它。当我尝试用npm install --save ../<component_name>测试它时，它会抛出一个错误。
我的目录结构：
- react-native-weekly-calendar (folder)
- index.js
- package.json
- src (folder)
- Locale.js
- Style.js
index.js：
import React, { useState, useEffect,
浏览 1提问于2020-03-19得票数 2
回答已采纳
我正在尝试使用，但是ListView的主分支版本给出了错误：TypeError: undefined is not a constructor (evaluating 'new _reactNative.ListView.DataSource')
该项目中的一个添加了我需要的ListView功能。
如何将这个PR添加到我自己的项目中？
我试过的是：
创建并手动添加文件，然后尝试使用npm直接加载它，根据这个，它没有工作，关键的核心组件丢失了。通常安装React的方式是npm install --save react@0.14 react-dom@0.14 react-nat
浏览 2提问于2016-06-23得票数 0
回答已采纳
1回答
我用react原生网页创建了一个项目，我得到了react原生图标，除了在故事书上，我还可以在web和移动设备上使用。我不知道如何告诉故事书，webpack配置加载FontAwesome字体。我尝试在FontAwesome -head.html中添加预览，但仍然没有显示图标，只是显示了一个矩形作为占位符。我想要的是让我的图标显示在故事书的服务器上。 .storybook/main.js： const webpack = require('webpack');
const path = require('path');
const rootDir = path.j
浏览 52提问于2020-10-14得票数 0
回答已采纳
我正在学习linkedin的一个教程，问题似乎是我还没有完全理解依赖关系。这句话让人抓狂：
import {Button} from 'react-native-paper';
这是我的包文件：
{
"name": "fixmypaper",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
浏览 8提问于2022-01-21得票数 1
我在settings.gradel中遇到错误。设置文件'C:\Users\abhi\abhilash\floatbutton\android\settings.gradle'： 3: unexpected char:
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android')
showing error in // \react-
浏览 12提问于2019-01-31得票数 0
请帮我修复以下错误
ListItem.js:41 Uncaught :无法读取未定义的的属性“灰色”
at renderIcon (ListItem.js:41)
at ListItem (ListItem.js:220)
at renderWithHooks (react-dom.development.js:16241)
at mountIndeterminateComponent (react-dom.development.js:18775)
at beginWork$1 (react-dom.development.js:20137)
at HTMLUnknownElement.ca
浏览 0提问于2020-09-21得票数 3
尝试使用https://github.com/callstack/react-native-testing-library + https://github.com/testing-library/jest-native进行一些单元测试，测试纯javascript文件没有问题，但在组件上测试时遇到以下错误： ● Test suite failed to run
Jest encountered an unexpected token
Details:
C:\Users\admin\Documents\my_project\node_modules\@expo\
浏览 6提问于2021-04-07得票数 1
我正尝试在web浏览器中启动一个小的原生反应项目(使用expo完成)，但我一直收到这个错误。 Failed to compile.
C:/Users/SUPPORT/AppData/Roaming/npm/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js
Error: [BABEL] C:\Users\SUPPORT\AppData\Roaming\npm\node_modules\expo-cli\node_modules\react-dev-utils\webpackHotDevC
浏览 15提问于2020-07-04得票数 0
回答已采纳
1回答
每当我试图在react本机项目中安装任何npm包时，它都挂在remove:@babel/core处。
我正在尝试将下拉包安装到我的react本机项目中，但是它无限期挂起
以下是我的package.json文件：
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-r
浏览 0提问于2021-04-15得票数 0
1回答
如何阅读世博会管理项目的信息？ 我正在从事由expo管理的react原生项目。我想从这些设备上读取信息。如何获取消息的访问权限？ 我偶然发现了一些包，但没有找到任何合法的包。那么有没有可以在世博会上使用的套餐呢？ {
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"i
浏览 11提问于2020-09-28得票数 1
回答已采纳
当使用Permissions.check()调用时，我得到了这个错误
我直接使用了react本机权限的代码
componentWillMount() {
Permissions.check('photo').then(response => {
console.log(response);
});
}
我使用了react本机链接来连接它。
react-native link react-native-permissions
我很确定它的链接是正确的，因为当我调用Permissions.getTypes()
浏览 0提问于2018-03-27得票数 1
回答已采纳
我决定重新开始一个新的react-原生项目，所以我将react客户端更新为最新2.0，将cocoapods更新为最新版本，我刚刚初始化了一个空白react--原生项目、纱线添加了一堆依赖项、react-本机链接到没有错误，然后尝试运行并获得了大量错误。我错过了什么很明显的东西吗？
步骤：
react-native init Foo && cd Foo
yarn add react-dom
yarn add react-apollo
yarn add @shoutem/ui
yarn add apollo-client@^0.6.0
yarn add react-dom r
浏览 3提问于2017-01-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
