重写 tabbar

package.json

@@ -17,6 +17,7 @@
     "babel-preset-react-app": "^7.0.1",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "classnames": "^2.2.6",
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",

src/App.js

@@ -1,9 +1,12 @@
 import React, {Component} from 'react'
 import {Icon} from 'antd'
-import {TabBar} from 'antd-mobile'
+import {Row, Col} from 'antd'
 import Home from './pages/home'
 import Cart from './pages/cart'
 import My from './pages/my'
+import './app.css'
+import {BrowserRouter as Router, Switch, Route, NavLink} from 'react-router-dom'
+import classnames from 'classnames'
 
 class App extends Component {
     constructor(props) {
@@ -11,35 +14,10 @@ class App extends Component {
         this.state = {
             selectedTab: 'home',
             tabHidden: false,
-            page:'detail'
+            page: 'detail'
         }
     }
 
-    componentWillMount(){
-        this.getHash();
-    }
-
-    componentWillReceiveProps(nextProps, nextContext) {
-        this.getHash();
-    }
-
-    getHash = () => {
-        let hash = window.location.hash || '#tab=home';
-        let tab = 'home',page = 'detail';
-        if(hash && hash.indexOf("&")>0){
-            let tabHash = hash.split("&")[0], pageHash = hash.split("&")[1];
-            tab = tabHash.substr(tabHash.indexOf("=")+1);
-            page = pageHash.substr(pageHash.indexOf("=")+1);
-        }
-        // console.log('tab',tab);
-        // console.log('page',page);
-
-        this.setState({
-            selectedTab: tab,
-            page
-        });
-    };
-
     changeTabBar = (tab, hidden) => {
         this.setState({
             selectedTab: tab,
@@ -47,62 +25,76 @@ class App extends Component {
         })
     }
 
+    chooseClassNames = (tabbar) => (
+        classnames(
+            {'tabbar-inactive': this.state.selectedTab !== tabbar},
+            {'tabbar-active': this.state.selectedTab === tabbar}
+        )
+    )
+
     render() {
-        let {selectedTab, tabHidden, page} = this.state;
+        let {selectedTab, tabHidden, page} = this.state
         return (
-            <div style={{
-                position: 'fixed',
-                height: '100%',
-                width: '100%',
-                top: 0
-            }}>
-                <TabBar
-                    unselectedTintColor="#949494"
-                    tintColor="#33A3F4"
-                    barTintColor="white"
-                    hidden={tabHidden}
-                >
-                    <TabBar.Item
-                        title="首页"
-                        key="home"
-                        icon={<HomeUnselectedIcon/>}
-                        selectedIcon={<HomeSelectedIcon/>}
-                        selected={selectedTab === 'home'}
-                        onPress={() => {
-                            window.location.hash = 'tab=home';
-                            this.changeTabBar('home')
-                        }}
-                    >
-                        <Home changeTabBar={this.changeTabBar}/>
-                    </TabBar.Item>
-                    <TabBar.Item
-                        icon={<CartUnselectedIcon/>}
-                        selectedIcon={<CartSelectedIcon/>}
-                        title="购物袋"
-                        key="cart"
-                        selected={selectedTab === 'cart'}
-                        onPress={() => {
-                            window.location.hash = `tab=cart&page=${page}`;
-                            this.changeTabBar('cart')
-                        }}
-                    >
-                        <Cart changeTabBar={this.changeTabBar}/>
-                    </TabBar.Item>
-                    <TabBar.Item
-                        icon={<MyUnselectedIcon/>}
-                        selectedIcon={<MySelectedIcon/>}
-                        title="我的"
-                        key="my"
-                        selected={selectedTab === 'my'}
-                        onPress={() => {
-                            window.location.hash = 'tab=my';
-                            this.changeTabBar('my')
-                        }}
-                    >
-                        <My changeTabBar={this.changeTabBar}/>
-                    </TabBar.Item>
-                </TabBar>
-            </div>
+            <Router>
+                <div>
+                    <div className={classnames('tabbar', {'tarbar-hidden': tabHidden})}>
+                        <Row>
+                            {/*navlink 的 activeClass 有点问题*/}
+                            <NavLink exact to="/">
+                                <Col className={this.chooseClassNames('home')} span={8} onClick={() => {
+                                    this.changeTabBar('home')
+                                }}>
+                                    {
+                                        selectedTab === 'home' ?
+                                            <HomeSelectedIcon/>
+                                            :
+                                            <HomeUnselectedIcon/>
+                                    }
+                                    <div>
+                                        主页
+                                    </div>
+                                </Col>
+                            </NavLink>
+                            <NavLink to="/cart">
+                                <Col className={this.chooseClassNames('cart')} span={8} onClick={() => {
+                                    this.changeTabBar('cart')
+                                }}>
+                                    {
+                                        selectedTab === 'cart' ?
+                                            <CartSelectedIcon/>
+                                            :
+                                            <CartUnselectedIcon/>
+                                    }
+                                    <div>
+                                        购物篮
+                                    </div>
+                                </Col>
+                            </NavLink>
+                            <NavLink to="/my">
+                                <Col className={this.chooseClassNames('my')} span={8} onClick={() => {
+                                    this.changeTabBar('my')
+                                }}>
+                                    {
+                                        selectedTab === 'my' ?
+                                            <MySelectedIcon/>
+                                            :
+                                            <MyUnselectedIcon/>
+                                    }
+                                    <div>
+                                        我
+                                    </div>
+                                </Col>
+                            </NavLink>
+                        </Row>
+                    </div>
+                    <Switch>
+                        <Route exact path="/" component={Home}/>
+                        <Route path="/home" component={Home}/>
+                        <Route path="/cart" component={Cart}/>
+                        <Route path="/my" component={My}/>
+                    </Switch>
+                </div>
+            </Router>
         )
     }
 }
@@ -126,17 +118,9 @@ const CartSelectedIcon = () => (
 )
 
 const MyUnselectedIcon = () => (
-    <div style={{
-        width: '22px',
-        height: '22px',
-        background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
-    }}/>
+    <Icon type="setting" style={{fontSize: 22}}/>
 )
 
 const MySelectedIcon = () => (
-    <div style={{
-        width: '22px',
-        height: '22px',
-        background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
-    }}/>
+    <Icon type="setting" theme="twoTone" style={{fontSize: 22}}/>
 )

src/app.css

@@ -0,0 +1,22 @@
+.tabbar {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    bottom: 0;
+    background-color: white;
+    z-index: 1;
+    border-top: 1px solid #F3F3F3;
+    text-align: center;
+}
+
+.tabbar-active {
+    color: #258fff;
+}
+
+.tabbar-inactive {
+    color: #b9b9b9;
+}
+
+.tabbar-hidden {
+    display: none;
+}

src/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
 import App from './App'
 
 import ApolloClient from "apollo-boost"
@@ -14,11 +13,7 @@ const client = new ApolloClient({
 
 ReactDOM.render(
     <ApolloProvider client={client}>
-        <Router>
-            <Switch>
-                <Route exact path="/" component = { App }/>
-            </Switch>
-        </Router>
+        <App/>
     </ApolloProvider>,
     document.getElementById('root')
 )

src/pages/cart/empty/index.js

@@ -22,9 +22,11 @@ class Empty extends Component {
                 <div>
                     <button className="empty-button"
                             onClick={()=>{
-                                this.props.history.push({
-                                    pathname: `/`
-                            })}}>
+                                window.location = '/#tab=my'
+                            //     this.props.history.push({
+                            //         pathname: `/`
+                            // })
+                            }}>
                         去逛逛
                     </button>
                 </div>

src/pages/cart/index.js

@@ -1,63 +1,63 @@
 import React, {Component} from 'react'
-import { NavBar,ActivityIndicator } from 'antd-mobile';
+import {NavBar, ActivityIndicator} from 'antd-mobile'
 import {Query} from "react-apollo"
 import gql from "graphql-tag"
 
-import CartItem from "./CartItem";
-import CartEdit from "./CartEdit";
-import Empty from "./empty";
-import {cart_by_userid} from "../../utils/gql";
+import CartItem from "./CartItem"
+import CartEdit from "./CartEdit"
+import Empty from "./empty"
+import {cart_by_userid} from "../../utils/gql"
 
 class Cart extends Component {
     constructor(props) {
-        super(props);
+        super(props)
         this.state = {
-            page:'detail'
+            page: 'detail'
         }
     }
 
-    componentWillMount(){
-        this.getHash();
+    componentWillMount() {
+        this.getHash()
     }
 
     componentWillReceiveProps(nextProps, nextContext) {
-        this.getHash();
+        this.getHash()
     }
 
     getHash = () => {
         // console.log('location',window.location.hash);
-        let hash = window.location.hash || '#tab=cart&page=detail';
-        let page = 'detail';
-        if(window.location.hash && hash.indexOf("&")>0){
-            let pageHash = hash.split("&")[1];
-            page = pageHash.substr(pageHash.indexOf("=")+1);
+        let hash = window.location.hash || '#tab=cart&page=detail'
+        let page = 'detail'
+        if (window.location.hash && hash.indexOf("&") > 0) {
+            let pageHash = hash.split("&")[1]
+            page = pageHash.substr(pageHash.indexOf("=") + 1)
         }
         this.setState({
             page
-        });
-    };
+        })
+    }
 
-    changeCartPage =()=>{
-        this.setState((preState)=>({
-            page:preState.page === 'detail'?'edit':'detail'
-        }));
-    };
+    changeCartPage = () => {
+        this.setState((preState) => ({
+            page: preState.page === 'detail' ? 'edit' : 'detail'
+        }))
+    }
 
     renderPage = (data) => {
-        let {page} = this.state;
+        let {page} = this.state
 
         switch (page) {
             case 'detail':
-                return <CartItem cartList={data.cartList}/>;
+                return <CartItem cartList={data.cartList}/>
             case 'edit':
-                return <CartEdit cartList={data.cartList}/>;
+                return <CartEdit cartList={data.cartList}/>
             default:
                 return <div>test</div>
         }
-    };
+    }
 
     render() {
-        let {page} = this.state;
+        let {page} = this.state
 
         return (
             <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
@@ -73,7 +73,7 @@ class Cart extends Component {
                         if (error) {
                             return 'error!'
                         }
-                        console.log('cart data',data);
+                        // console.log('cart data',data);
 
                         return (
                             <div>
@@ -83,13 +83,13 @@ class Cart extends Component {
                                     rightContent={[
                                         data.cartList.length ?
                                             <span key={"1"} onClick={this.changeCartPage}>
-                                                {page === 'detail' ? "编辑":"完成"}
-                                            </span>:''
+                                                {page === 'detail' ? "编辑" : "完成"}
+                                            </span> : ''
                                     ]}
                                 >购物袋
                                 </NavBar>
                                 {data.cartList.length ?
-                                        this.renderPage(data):<Empty/>
+                                    this.renderPage(data) : <Empty/>
                                 }
                             </div>
                         )
@@ -100,4 +100,4 @@ class Cart extends Component {
     }
 }
 
-export default Cart;
+export default Cart