未从 react-native-vector-icons/FontAwesome 加载图标

Question

你们今天 react-native-vector-icons/FontAwesome 遇到问题了吗？我使用的是 >0.6 的 react-native 版本，所以我认为问题不在于链接。

正如你们在图片中看到的那样，它没有显示我要求的任何图标，我不知道发生了什么...

这是我的 android 模拟器上显示的图片： Print-Scream-Icon-Not-Showing-up

import React from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'



export default function ActionButton(props) {

    return(
        <TouchableOpacity>
        <View style={styles.container}>
           
           <Icon name='plus' size={30} color='#777' />
           <Icon name='trash' size={30} color='#777' />
           <Icon name='search'  size={30} color='#777' />
        </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container:{
        justifyContent:'center',
        alignItems:'center',
        width:80,
        height:40,
        backgroundColor:'#FFF',
        elevation:9,
        marginTop:20,
        borderRadius:6,
        paddingVertical:15,
        marginBottom:10
       
    }
})

Answer 1

如果你用的是expo，可以这样写：

import { FontAwesome } from "@expo/vector-icons";

<FontAwesome name="dollar" size={60} color={"green"} />

Answer 2

你能试试这样添加 loadFont 函数吗？

import React from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

Icon.loadFont(); // <- Add this line


export default function ActionButton(props) {

    return(
        <TouchableOpacity>
        <View style={styles.container}>
           
           <Icon name='plus' size={30} color='#777' />
           <Icon name='trash' size={30} color='#777' />
           <Icon name='search'  size={30} color='#777' />
        </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container:{
        justifyContent:'center',
        alignItems:'center',
        width:80,
        height:40,
        backgroundColor:'#FFF',
        elevation:9,
        marginTop:20,
        borderRadius:6,
        paddingVertical:15,
        marginBottom:10
       
    }
})

Answer 3

所以库 react-native-vector-icons 不支持 Auto-Link on react-native > 6.0 这意味着你必须运行命令 npx react-native link react-native-vector-icons 到 link，在 link 重新运行 android 模拟器之后，一切都会正常工作。！。特别感谢帮我解答的匿名者！！！

未从 react-native-vector-icons/FontAwesome 加载图标

Not loading Icons from react-native-vector-icons/FontAwesome

javascript

android

ios

font-awesome

react-native