我想在螢屏上顯示我的底部圖示我有這樣的陣列
export const bottomTabIcons = [
{
name: 'Home',
active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/home.png',
inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/home.png',
},
{
name: 'Search',
active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/search.png',
inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/search.png',
},
{
name: 'Reels',
active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/video.png',
inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/video.png',
},
{
name: 'Shop',
active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/shopping-bag-full.png',
inactive: 'https://img.icons8.com/fluency-systems-regular/48/ffffff/shopping-bag-full.png',
},
{
name: 'Profile',
active: 'https://img.icons8.com/fluency-systems-filled/48/ffffff/user-male-circle.png',
inactive: 'https://img.icons8.com/ios/48/ffffff/user-male-circle.png',
}
]
像這樣的底部標簽組件
const BottomTab = (icons) => {
const [activeTab, setActiveTab] = useState('HOME')
const Icon = ({icon}) => (
<TouchableOpacity onPress={() => setActiveTab(icon.name)}>
<Image source={{uri: icon.active}} style={styles.icon} />
</TouchableOpacity>
)
return (
<View>
{icons.map((icon, index) => (
<Icon key={index} icon={icon} />
))}
</View>
)
}
因為我是在主螢屏上訪問它，所以我確實可以這樣訪問它，
<BottomTab icons={bottomTabIcons} />
這是錯誤的
{icons.map((icon, index) => (
<Icon key={index} icon={icon} />
))}
怎么解決啊...
uj5u.com熱心網友回復：
const BottomTab = ({icons}) => {}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/319247.html