diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 0000000..5e0e988
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,7 @@
+const {override, fixBabelImports} = require('customize-cra');
+module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd-mobile',
+ style: 'css',
+ }),
+);
\ No newline at end of file
diff --git a/package.json b/package.json
index da64a81..45eea79 100644
--- a/package.json
+++ b/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",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "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"
}
}
diff --git a/src/App.js b/src/App.js
index ce9cbd2..c8dae96 100644
--- a/src/App.js
+++ b/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 (
);
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -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();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/Tab.jsx b/src/components/Tab.jsx
new file mode 100644
index 0000000..90ce111
--- /dev/null
+++ b/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 (
+
+ );
+ }
+
+ render() {
+ return (
+
+
+ }
+ selectedIcon={}
+ selected={this.state.selectedTab === 'blueTab'}
+ badge={1}
+ onPress={() => {
+ this.setState({
+ selectedTab: 'blueTab',
+ });
+ }}
+ data-seed="logId">
+ {/*{this.renderContent('Life')}*/}
+
+
+ }
+ selectedIcon={
+
+ }
+ title="Koubei"
+ key="Koubei"
+ badge={'new'}
+ selected={this.state.selectedTab === 'redTab'}
+ onPress={() => {
+ this.setState({
+ selectedTab: 'redTab',
+ });
+ }}
+ data-seed="logId1"
+ >
+ {this.renderContent('Koubei')}
+
+
+ }
+ selectedIcon={
+
+ }
+ title="Friend"
+ key="Friend"
+ dot
+ selected={this.state.selectedTab === 'greenTab'}
+ onPress={() => {
+ this.setState({
+ selectedTab: 'greenTab',
+ });
+ }}
+ >
+ {this.renderContent('Friend')}
+
+ {
+ this.setState({
+ selectedTab: 'yellowTab',
+ });
+ }}
+ >
+ {this.renderContent('My')}
+
+
+
+ );
+ }
+}
+
+export default Tab;
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 74b1a27..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -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';