import Icon from 'react-native-vector-icons/Feather';
import Icon from 'react-native-vector-icons/Ionicons';
我想在同一組件中使用來自“react-native-vector-icons/Feather”和“react-native-vector-icons/Ionicons”的圖示。
但是匯入兩個圖示會出現語法錯誤。
export default function App() {
return (
<SafeAreaView style={styles.container}>
{/* message-circle is from 'react-native-vector-icons/Feather' */}
Icon name="message-circle" size={20} color='white' />
{/* md-caret-down is from 'react-native-vector-icons/Ionicons' */}
{/* Icon name="message-circle" size={20} color='white' /> */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});```
uj5u.com熱心網友回復：
使用 (npm i react-native-vector-icons)匯入反應原生矢量圖示。
然后使用來自不同包的矢量圖示到您當前的組件中，例如 View、SafeAreaView 、 ScrollView 、....等，如下面的代碼。
您可以像這種方法一樣使用矢量圖示中的任何包。
import {Ionicons,MaterialCommunityIcons,FontAwesome5} from '@expo/vector-icons';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Ionicons
name="information-circle"
size={24}
color={"#3280F0"}
/>
{/* information-circle is from 'expo/vector-icons/Ionicons' */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},uj5u.com熱心網友回復：
您可以通過別名使用同名的模塊匯入，如下所示。
import {Icon as FeatherIcon} from 'react-native-vector-icons/Feather';
import {Icon as Ionicons} from 'react-native-vector-icons/Ionicons';
如需更多參考，您可以參考medium.com上的此檔案
對于別名，您必須使用唯一名稱。喜歡
import {Something as SomethingNewName} from .....
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486047.html