不從 react-native-vector-icons/FontAwesome 加載圖標

Question

你們今天對 react-native-vector-icons/FontAwesome 有問題嗎？ 我使用的是 react-native 版本 >0.6 所以我認為問題不在於鏈接。

正如你們在圖片中看到的那樣，它沒有顯示我要求的任何圖標，我不知道發生了什么......

這是我的 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

所以庫react-native-vector-icons不支持 react-native > 6.0 上的自動鏈接，這意味着您必須運行命令npx react-native link react-native-vector-icons來鏈接，在重新鏈接后運行 android 仿真器，一切正常。 .. 特別感謝幫助我回答的匿名者！！！

Answer 2

如果你使用的是 expo，你可以這樣寫：

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

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

Answer 3

您可以嘗試像這樣添加 loadFont function 嗎？

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
       
    }
})