nelson
/
react-goods
1
0
Fork 0
程式碼 問題 合併請求 版本發佈 Wiki 動態
瀏覽代碼

add antdmobile

master
燕鹏 5 年前
父節點
ad3bd81d48
當前提交
12aaa0e889
共有 6 個檔案被更改，包括 165 行新增 和 32 行删除
空白符號
顯示所有變更 比較「行」時忽略空白符號 忽略空白符號的數量變化 忽略行尾空白符號的變更
分割檢視
差異選項
顯示統計資料 下載 Patch 檔 下載差異檔
  1. 7
      config-overrides.js
  2. 12
      package.json
  3. 17
      src/App.js
  4. 9
      src/App.test.js
  5. 147
      src/components/Tab.jsx
  6. 5
      src/setupTests.js

7
config-overrides.js
查看文件

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

12
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"
}
}

17
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">
<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>
<Tab/>
</div>
);
}

9
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();
});

147
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;

5
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';
撰寫 預覽
載入中…
取消
儲存