react 底部bar 设置

版权声明：本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出 原文链接 如有问题， 可发送邮件咨询. https://blog.csdn.net/weixin_37865166/article/details/89477630

原文地址: https://dsx2016.com/?p=462

➢ react 底部tab

➢ 思路

定义三个页面组件,分别是home,shop,mine

定义一个公共组件bottomBar,然后放在三个组件里.

父组件传递给子组件状态值,来决定当前tab的状态

➢ 底部bar组件

底部bar组件拿到父组件的状态值stateNum

如果为0就是home页面,1是shop页面,2是mine页面

根据状态值决定图标的样式变化和跳转的路由

组件内设置图标资源路径,require图片或者https静态图片等

图片分为激活和未激活两种,样式也是

扫描二维码关注公众号，回复： 5987878 查看本文章

 this.state = {
         imgData: {
             home: {
                 default: `https://file.smallzhiyun.com/flash_icon.png`,
                 active: `https://file.smallzhiyun.com/300.png`
             },
             shop: {
                 default: `https://file.smallzhiyun.com/flash_icon.png`,
                 active: `https://file.smallzhiyun.com/300.png`
             },
             mine: {
                 default: `https://file.smallzhiyun.com/flash_icon.png`,
                 active: `https://file.smallzhiyun.com/300.png`
             }
                }
        };

➢ 图标状态:

<img
    src={
        this.props.stateNum === 0
        ? this.state.imgData.home.default
        : this.state.imgData.home.active
    }
    alt="img"
/>

➢ 样式状态:

定义默认样式和active样式

 .text {
            margin-top: 0.1rem;
            color: #fff;
       }
 .activeText {
                color: red;
            }

根据父组件传值决定样式的切换

 <div
     className={[
     "text",
     this.props.stateNum === 0 ? "activeText" : null
     ].join(" ")}
     >
     首页
 </div>