react 底部bar 设置

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

➢ react 底部tab

➢ 思路

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

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

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

➢ 底部bar组件

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

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

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

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

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

 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>