在使用 ui-kitten 库的底部导航栏(BottomNavigation)时,可以通过自定义样式来更改选定 BottomNavigationTab 的颜色。下面是一种实现方式:
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
selectedTab: {
backgroundColor: 'red', // 设置选定的 BottomNavigationTab 的背景颜色
},
});
import React from 'react';
import { BottomNavigation, BottomNavigationTab } from 'ui-kitten';
import { styles } from './styles';
const MyBottomNavigation = () => {
const [selectedIndex, setSelectedIndex] = React.useState(0);
const onTabSelect = (index) => {
setSelectedIndex(index);
};
return (
<BottomNavigation
selectedIndex={selectedIndex}
onSelect={onTabSelect}
>
<BottomNavigationTab
title='Tab 1'
style={selectedIndex === 0 ? styles.selectedTab : null} // 应用自定义样式到选定的 BottomNavigationTab
/>
<BottomNavigationTab
title='Tab 2'
style={selectedIndex === 1 ? styles.selectedTab : null} // 应用自定义样式到选定的 BottomNavigationTab
/>
</BottomNavigation>
);
};
export default MyBottomNavigation;
在上述代码中,我们使用了一个状态变量 selectedIndex 来跟踪当前选定的 BottomNavigationTab。当用户选择不同的 Tab 时,我们更新 selectedIndex 的值,并根据其值来应用不同的样式。
注意:上述代码中的样式仅为示例,你可以根据自己的需求自定义样式。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。你可以根据自己的需求和实际情况,在腾讯云官方网站上查找相关产品和文档。
领取专属 10元无门槛券
手把手带您无忧上云