add antdmobile

config-overrides.js

@@ -0,0 +1,7 @@
+const {override, fixBabelImports} = require('customize-cra');
+module.exports = override(
+    fixBabelImports('import', {
+        libraryName: 'antd-mobile',
+        style: 'css',
+    }),
+);

package.json

@@ -6,14 +6,15 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd-mobile": "^2.3.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -30,5 +31,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.1.6"
   }
 }

src/App.js

@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Tab from './components/Tab'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <Tab/>
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/Tab.jsx

@@ -0,0 +1,147 @@
+import React, {Component, Fragment} from 'react';
+import {TabBar} from 'antd-mobile';
+
+class Tab extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedTab: 'redTab',
+            hidden: false,
+            fullScreen: true,
+        };
+    }
+
+    renderContent(pageText) {
+        return (
+            <div style={{backgroundColor: 'white', height: '100%', textAlign: 'center'}}>
+                <div style={{paddingTop: 60}}>Clicked “{pageText}” tab， show “{pageText}” information</div>
+                <a style={{display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9'}}
+                   onClick={(e) => {
+                       e.preventDefault();
+                       this.setState({
+                           hidden: !this.state.hidden,
+                       });
+                   }}
+                >
+                </a>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div style={this.state.fullScreen ? {
+                position: 'fixed',
+                height: '100%',
+                width: '100%',
+                top: 0
+            } : {height: 400}}>
+                <TabBar
+                    unselectedTintColor="#949494"
+                    tintColor="#33A3F4"
+                    barTintColor="white"
+                    hidden={this.state.hidden}
+                >
+                    <TabBar.Item
+                        title="Life"
+                        key="Life"
+                        icon={<div style={{
+                            width: '22px',
+                            height: '22px',
+                            background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
+                        }}/>}
+                        selectedIcon={<div style={{
+                            width: '22px',
+                            height: '22px',
+                            background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
+                        }}/>}
+                        selected={this.state.selectedTab === 'blueTab'}
+                        badge={1}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'blueTab',
+                            });
+                        }}
+                        data-seed="logId">
+                        {/*{this.renderContent('Life')}*/}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        selectedIcon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        title="Koubei"
+                        key="Koubei"
+                        badge={'new'}
+                        selected={this.state.selectedTab === 'redTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'redTab',
+                            });
+                        }}
+                        data-seed="logId1"
+                    >
+                        {this.renderContent('Koubei')}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        selectedIcon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        title="Friend"
+                        key="Friend"
+                        dot
+                        selected={this.state.selectedTab === 'greenTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'greenTab',
+                            });
+                        }}
+                    >
+                        {this.renderContent('Friend')}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={{uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg'}}
+                        selectedIcon={{uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg'}}
+                        title="My"
+                        key="my"
+                        selected={this.state.selectedTab === 'yellowTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'yellowTab',
+                            });
+                        }}
+                    >
+                        {this.renderContent('My')}
+                    </TabBar.Item>
+                </TabBar>
+            </div>
+        );
+    }
+}
+
+export default Tab;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';