Bottombar 底部栏

渲染出底部栏

安装

npm install @qnpm/q-bottombar --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import BottomBar from '@qnpm/q-bottombar';

const data = [{
    topNode: <Icon name='chat' size={20} />,
    text: "客服",
    showNotice: true,
    noticeText: '12'
}, {
    topNode: <Icon name='share' size={20} />,
    text: "分享",
    showNotice: true
}, {
    topNode: <Icon name='plus' size={20} />,
    text: "浏览收藏",
    showNotice: true,
    noticeText: '这是标签'
}]
const customStyle = {
    textActiveColor: 'red'
};
const render = () => {
    const [
        activeIndex,
        setActiveIndex
    ] = useState(1);

    return (
        <View style={styles.container}>
            <BottomBar
                data={data}
                customStyle={customStyle}
                activeIndex={activeIndex}
                onClick={(item, index) => {
                    setActiveIndex(index);
                }}
                needScale
            />
        </View>
    );

属性说明

属性名 类型 默认值 是否必须 说明
accessibilityPreName string `` false 无障碍标签前缀
activeIndex number - false 选中项
customStyle Object - false 自定义样式
data array - true 展示数据,每一项均为NoticeItem
needScale boolean - false 是否根据屏幕大小缩放
onClick Function - false 点击回调

customStyle 说明

customStyle仅支持以下几个属性：

'wrapperStyle' // 外层容器样式
'textColor' // 下方文案颜色
'textActiveColor' // 下方文案选中颜色
'noticeBorderColor' // 右上提示边框色
'noticeBgColor' // 右上提示背景色
AnimatedTab
Bubble