如何在expo中添加FontAwesome图标
在 Expo 中添加 FontAwesome 图标可以通过以下步骤完成：
- 首先，确保你已经创建了一个 Expo 项目并安装了 Expo CLI 工具。
- 打开终端或命令提示符，进入你的 Expo 项目目录。
- 运行以下命令来安装
@expo/vector-icons包：
expo install @expo/vector-icons- 在你的代码中导入所需的 FontAwesome 图标。例如，如果你想使用
FontAwesome图标库中的heart图标，可以这样导入：
import { FontAwesome } from '@expo/vector-icons';- 在你的组件中使用导入的图标。例如，将
FontAwesome图标作为一个 React Native 组件添加到你的视图中：
<FontAwesome name="heart" size={24} color="red" />在上述代码中，name 属性指定了要使用的 FontAwesome 图标的名称，size 属性指定了图标的大小，color 属性指定了图标的颜色。
这样，你就可以在 Expo 项目中使用 FontAwesome 图标了。
推荐的腾讯云相关产品：无
请注意，以上答案仅供参考，具体实现方式可能因个人项目配置和需求而有所不同。如需更详细的信息和示例代码，请参考 Expo 官方文档和 FontAwesome 官方文档。
相关·内容
2回答
android和ios的矢量图标
javascript、react-native、expo、react-native-vector-icons、vector-icons
在中，我们有两种方式来加载ios和安卓的图标。我尝试了两种方法，使用@expo/Vector-图标的9.0.0版本。
我用以下语句导入Ionicons：
import { Ionicons } from '@expo/vector-icons';
从名称中删除ios/md
<Ionicons name="close-circle" size={25} style={{color: 'white'}} />
我得到以下错误，这也发生在其他图标名称上：
警告:失败的道具类型:无效的道具名称的值封闭提供给图标，期望之一.
浏览 5提问于2019-06-15得票数 0
1回答
响应本机-世博/矢量-图标类型记录图标名称类型定义
typescript、react-native
我试图找出expo/vector-icons，图标名的类型定义，因为我打算将它用于组件道具。
我是导入expo/vector-icons喜欢和定义像这样的接口道具，我尝试类型图标名称作为字符串。
import Icon from "@expo/vector-icons/FontAwesome"
interface Props {
icon: string
value: string
placeholder: string
onChangeText: (text: string) => void
secureTextEntry?:
浏览 6提问于2022-05-17得票数 6
回答已采纳
1回答
如何键入一个按钮，包括一个图标与反应本机？
reactjs、typescript、react-native
我正在尝试键入一个按钮组件，其中所有的都必须得到一个标题，但有些没有得到一个图标。这个图标来自"@expo/vector-icons".当我把组件也显示一个图标时，我应该做什么？
喜欢：<Button icon={<FontAwesome name="icon-name" size={24} colo="color"} title="Title here" />
我的实际代码：
type IButtonProps = TouchableOpacityProps & {
title: string;
浏览 2提问于2021-08-30得票数 1
1回答
世博会图标高度
react-native、expo
我在我的应用程序中使用expo图标，当我增加图标的大小时，它的宽度和高度都会增加。我只需要增加图标的高度，有什么建议吗？
import { Entypo } from "@expo/vector-icons";
<Entypo name="bookmark" size={30} color="black" />
浏览 4提问于2020-12-05得票数 0
5回答
如何在react原生应用中添加@expo/vector-icons？
react-native、expo
我使用的是@expo/vector-icons这里是我的package.json文件
"dependencies": {
"@expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react
浏览 2提问于2018-10-10得票数 1
回答已采纳
3回答
react本机中fontAwesome图标的圆形轮廓
javascript、css、reactjs、typescript、react-native
我想使用fontAwesome +图标，这样它就在圆圈的中间。我想把它当做一个图标项目使用。我读到我们可以将它与圆圈图标一起使用，并将其放入其中，但我无法使其工作。 import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
浏览 25提问于2020-10-09得票数 0
回答已采纳
2回答
本机-反应性+博览会:无法解析"src/boot/setup.js“中的”@expo/Vector-图标/字体/ionicons.ttf“
javascript、reactjs、react-native、expo、ionicons
我刚开始使用命令npm start或expo start在启动时使用Reactinative0.57.1和expo2.21.2
import * as Expo from "expo";
....
async componentWillMount() {
await Expo.Font.loadAsync({
Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ isReady: true });
}
这给出了一
浏览 1提问于2019-07-15得票数 2
回答已采纳
1回答
TypeError: Font.isLoaded不是世博会中的函数(在“Font.isLoaded(FontName)”中，“Font.isLoaded”未定义)
react-native、expo、ionicons、react-native-vector-icons
我正在构建一个使用Expo 31.0.4和Expo Vector图标的React Native应用程序。当我使用离子图标来构建TabBar时，出现了一个错误。 import { Ionicons } from '@expo/vector-icons';
const Main = TabNavigator({
Settings: {
screen: ProfileStack,
navigationOptions: ({navigation}) => ({
tabBarIcon: ({tintColor})
浏览 14提问于2019-01-17得票数 2
回答已采纳
1回答
如何为离子图标渲染徽章？(TabBar图标)
reactjs、react-native
我正在为TabBar图标使用<Ionicons>。
我正在获取用户尚未阅读的通知数量的数据。
在这种情况下，我想把1展示给图标。我想我们叫它badging
例如,
下面是我的代码片段。如果你用过Expo，expo提供的默认项目没有太多变化。
import { Ionicons } from '@expo/vector-icons';
...
tabBarIcon: ({ focused }) => {
<Ionicons
name={iconName}
size={30}
style=
浏览 13提问于2017-12-14得票数 0
回答已采纳
1回答
用还原剂响应本机的Redux问题，以便将一项添加到收藏夹中
reactjs、react-native、redux、react-redux、reducers
我为这件事挣扎了很长时间。我试图创建一个减速机，以便能够将一项添加到收藏列表中。我可以创建一个state对象并使用useState将id保存到state对象中，但是遇到了一个砖墙，试图对Redux进行同样的操作。
这是我的favicon.js
import React, {useState} from 'react'
import { FontAwesome } from '@expo/vector-icons'
import { View, TouchableOpacity,StyleSheet, Text, Alert } from 'react-n
浏览 3提问于2021-01-22得票数 1
2回答
React useSelector不工作，我做错了什么？
reactjs、react-native、redux、react-redux
我有一个包含selector.js文件的选择器文件夹 const isRecipeFavorited = state => recipeId => {
const recipe = state.find(recipe => recipe.id === recipeId)
console.log(`Selector isRecipeFavourtied: ${recipeId}`)
return recipe ? recipe.is_fav : false
} 这是我的favicon.js文件，它调用这个useSelector。 import Reac
浏览 31提问于2021-02-04得票数 0
1回答
React Native中带有图标的标题按钮
react-native
我已经使用ReactNative创建了一个示例应用程序。我已经使用了ReactNative导航(堆栈导航)。它只有两个屏幕。主页和详细信息屏幕。我成功地实现了Stack导航。然而，我有问题添加一个标题的标题右边的标题按钮的图标。为了添加带有图标的标题按钮，我使用了一个名为HeaderButtons的第三方库。然而，当我渲染时，它只显示标题而不显示图标。请注意，我已经使用expo创建了reactnative项目和来自@expo/vector-icons的图标。
提前谢谢你，Yohan
//这是自定义头部组件
import React, { Component } from "react&
浏览 26提问于2020-05-27得票数 1
4回答
如何改变Vue 3字体的颜色可怕的图标？
css、vue.js、font-awesome、vuejs3
我正在使用Vue版本3.2.1，并遵循了Vue 3在的官方字体可怕的文档，还有这个视频：https://www.youtube.com/watch?v=MoDIpTuRWfM
令人尴尬的是，我似乎无法改变图标的颜色，尽管我可以更改背景颜色(见屏幕截图中的向上箭头)和透明度(见屏幕快照中的婴儿马车)。
这是我的密码：
main.js
// BEGIN font awesome icons, per https://github.com/FortAwesome/vue-fontawesome
import { library } from '@fortawesome/fontawesome
浏览 0提问于2021-08-23得票数 1
回答已采纳
3回答
反应本机矢量图标.动态类型
react-native、react-native-vector-icons
我使用不同类型的反应本机矢量图标-材料和FontAwesome取决于特定图标的可用性。我想要创建一个通用组件来包装整个应用程序中图标的使用情况。到目前为止，我已经：
import React from 'react';
import Icon from "react-native-vector-icons/FontAwesome";
import {theme} from "../../../styles/style";
/**
* Common reusable icon component
* @param props
* @retu
浏览 0提问于2019-07-06得票数 4
回答已采纳
2回答
Nativebase:如何渲染图标？
react-native、native-base
说“使用第三方图标库(比如@expo/vector-icons )，作为支持。”
我真的不知道这是什么意思，但是假设我想渲染Ionicon的主页图标。
<Icon as="Ionicons" name="home" size={size} color={color} />
这只是一个问号。你知道怎么用这个吗？
浏览 0提问于2021-11-08得票数 2
1回答
如何在React Native中使用不同的图标库？
react-native、icons
大家下午好。 我在代码的开头指定了确切的库 import Ionicons from 'react-native-vector-icons/FontAwesome'; 我有一个关于如何一起使用不同的矢量库的问题。例如>> <Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Dashboard')
浏览 14提问于2020-10-08得票数 0
5回答
TypeError:未定义不是函数(靠近‘...data.map.’)
javascript、reactjs、react-native
感谢你的帮助，我更新了我的代码。当我启动应用程序与博览，开放工作，但我失去了我的扫描图标，没有出现在我的屏幕。这个图标以前出现过。这样做的目的是扫描一些条形码，以便显示来自产品的相关数据。
这是我的新代码：
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Text,
View,
FlatList,
Button,
AsyncStorage,
} from "react-native";
import { useNavigation } fro
浏览 3提问于2020-06-05得票数 0
回答已采纳
3回答
动态传递prop，在react原生中不带任何值
reactjs、react-native
我对原生的反应是全新的。目前正在探索FontAwesome 5专业版图标的react原生矢量图标。 https://github.com/oblador/react-native-vector-icons FontAwesome 5的图标集有3种类型，分别为常规、实心和浅色。 import Icon from 'react-native-vector-icons/FontAwesome5';
const myIcon1 = <Icon name="comments" size={30} color="#900" />; // De
浏览 37提问于2019-03-14得票数 4
回答已采纳
2回答
如何让方框水平滚动？
ios、reactjs、react-native
我刚开始使用原生的react，我正在尝试制作一个社交媒体应用。我想让它让你可以垂直滚动查看某些帖子，然后水平滚动查看同一用户的其他帖子。我下载了一个UI框架，它是垂直滚动的，但是我怎么才能让帖子水平滚动呢？
Home.js
import React from 'react';
import {View,Text,Image,ImageBackground,TouchableOpacity} from 'react-native';
import {ScrollView,TextInput} from 'react-native-gesture-handl
浏览 19提问于2021-06-09得票数 0
2回答
无法使用世博会矢量图标中的所有图标
react-native、expo、react-native-vector-icons
这基本上就是我拥有的代码
import { Ionicons } from '@expo/vector-icons';
class DrawerItem extends React.Component {
render() {
return (
<Ionicons name="speedometer" size={14} color="green" />
)
}
}
我正在尝试使用在中找到的名为speedometer的图标。但是，在它的位置上出现了一个问号?，并
浏览 18提问于2020-11-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
