Блог

Я хочу показать свои нижние значки на экране, у меня есть массив, подобный этому

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

Как это решить…

const BottomTab = ({icons}) => {}