Skip to content

M
mr-julyedu
Commit b1531688 by baiguangyao
Options

修改路由

parent dfc67096
Showing with 9665 additions and 206 deletions
.history/src/App_20190416104109.js 0 → 100644
import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">primary</Button>
<Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
<Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
<NavBar
mode="light"
icon={<Icon type="left" />}
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
);
}
}
export default App;
.history/src/App_20190416115150.js 0 → 100644
import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'
import TabBar from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">primary</Button>
<Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
<Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
<NavBar
mode="light"
icon={<Icon type="left" />}
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
);
}
}
export default App;
.history/src/App_20190416115221.js 0 → 100644
import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'
import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<TabBarExample>
</div>
);
}
}
export default App;
.history/src/App_20190416115227.js 0 → 100644
import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'
import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<TabBarExample />
</div>
);
}
}
export default App;
.history/src/App_20190416115241.js 0 → 100644
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile'
import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<TabBarExample />
</div>
);
}
}
export default App;
.history/src/App_20190416115251.js 0 → 100644
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile'
import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<TabBarExample />
</div>
)
}
}
export default App;
.history/src/App_20190416115737.js 0 → 100644
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
)
}
}
export default App;
.history/src/App_20190416144544.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Router, Route } from 'react-router-dom'
import { NavBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
)
}
}
export default App;
.history/src/App_20190416150507.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Router, Route } from 'react-router-dom'
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
render() {
return (
<div className="App">
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
</div>
)
}
}
export default App;
.history/src/App_20190416150532.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Router, Route } from 'react-router-dom'
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416150738.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416150744.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416150820.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151025.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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"
>
</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"
>
</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 App;
.history/src/App_20190416151053.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151151.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151205.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151214.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151223.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', bottom: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416151456.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
点击切换 tab-bar 显示/隐藏
</a>
</div>
);
}
render() {
return (
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="生活"
key="生活"
icon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{this.renderContent('生活')}
</TabBar.Item>
<TabBar.Item
icon={<Icon type="koubei-o" size="md" />}
selectedIcon={<Icon type="koubei" size="md" />}
title="口碑"
key="口碑"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{this.renderContent('口碑')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
title="朋友"
key="朋友"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{this.renderContent('朋友')}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="我的"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('我的')}
</TabBar.Item>
</TabBar>
);
}
}
export default App;
.history/src/App_20190416151508.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
点击切换 tab-bar 显示/隐藏
</a>
</div>
);
}
render() {
return (
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="生活"
key="生活"
icon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{this.renderContent('生活')}
</TabBar.Item>
<TabBar.Item
icon={<Icon type="koubei-o" size="md" />}
selectedIcon={<Icon type="koubei" size="md" />}
title="口碑"
key="口碑"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{this.renderContent('口碑')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
title="朋友"
key="朋友"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{this.renderContent('朋友')}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="我的"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('我的')}
</TabBar.Item>
</TabBar>
);
}
}
export default App;
.history/src/App_20190416151830.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
点击切换 tab-bar 显示/隐藏
</a>
</div>
);
}
render() {
return (
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="生活"
key="生活"
icon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{this.renderContent('生活')}
</TabBar.Item>
<TabBar.Item
icon={<Icon type="koubei-o" size="md" />}
selectedIcon={<Icon type="koubei" size="md" />}
title="口碑"
key="口碑"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{this.renderContent('口碑')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
title="朋友"
key="朋友"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{this.renderContent('朋友')}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="我的"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('我的')}
</TabBar.Item>
</TabBar>
);
}
}
export default App;
.history/src/App_20190416152134.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
点击切换 tab-bar 显示/隐藏
</a>
</div>
);
}
render() {
return (
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="生活"
key="生活"
icon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{this.renderContent('生活')}
</TabBar.Item>
<TabBar.Item
icon={<Icon type="koubei-o" size="md" />}
selectedIcon={<Icon type="koubei" size="md" />}
title="口碑"
key="口碑"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{this.renderContent('口碑')}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
title="朋友"
key="朋友"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{this.renderContent('朋友')}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="我的"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('我的')}
</TabBar.Item>
</TabBar>
);
}
}
export default App;
.history/src/App_20190416153449.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>你已点击“{pageText}” tab， 当前展示“{pageText}”信息</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
点击切换 tab-bar 显示/隐藏
</a>
</div>
);
}
render() {
return (
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="生活"
key="生活"
icon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
{/* {this.renderContent('生活')} */}
</TabBar.Item>
<TabBar.Item
icon={<Icon type="koubei-o" size="md" />}
selectedIcon={<Icon type="koubei" size="md" />}
title="口碑"
key="口碑"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
{/* {this.renderContent('口碑')} */}
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '0.44rem',
height: '0.44rem',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 0.42rem 0.42rem no-repeat'
}}
/>
}
title="朋友"
key="朋友"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
{/* {this.renderContent('朋友')} */}
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="我的"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{/* {this.renderContent('我的')} */}
</TabBar.Item>
</TabBar>
);
}
}
export default App;
.history/src/App_20190416154559.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
};
}
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416154617.js 0 → 100644
import React, { Component } from 'react';
import { TabBar, Icon } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416155519.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416155522.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416155525.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<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 App;
.history/src/App_20190416155712.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="Index"
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 App;
.history/src/App_20190416155755.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="Index"
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="分类"
key="classify"
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 App;
.history/src/App_20190416155818.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="Index"
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="分类"
key="classify"
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="学习"
key="study"
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 App;
.history/src/App_20190416155826.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="Index"
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="分类"
key="classify"
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="学习"
key="study"
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="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('My')}
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155834.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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="分类"
key="classify"
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="学习"
key="study"
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="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('My')}
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155850.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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"
>
</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="分类"
key="classify"
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="学习"
key="study"
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="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
{this.renderContent('My')}
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155858.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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"
>
</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="分类"
key="classify"
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="学习"
key="study"
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="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155911.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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"
>
</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="分类"
key="classify"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
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="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155921.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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"
>
</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="分类"
key="classify"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416155943.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
icon={<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 21px 21px no-repeat'
}}
/>
}
/>
}
selected={this.state.selectedTab === 'blueTab'}
badge={1}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416160000.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
badge={'new'}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416160011.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
dot
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416160018.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416160222.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416160922.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App 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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416161037.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/App_20190416161146.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App 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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
.history/src/common/Tabbar/Tabbar_20190416114240.js 0 → 100644
import React, { Component } from 'react';
class TabBar extends Component {
render() {
return (
<div>底部菜单组件</div>
)
}
}
\ No newline at end of file
.history/src/common/Tabbar/Tabbar_20190416114714.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBar extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
render() {
return (
<div>底部菜单组件</div>
)
}
}
\ No newline at end of file
.history/src/common/Tabbar/Tabbar_20190416114848.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBar extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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>
);
}
}
ReactDOM.render(<TabBarExample />, mountNode);
.history/src/common/Tabbar/Tabbar_20190416114913.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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>
);
}
}
ReactDOM.render(<TabBarExample />, mountNode);
.history/src/common/Tabbar/Tabbar_20190416115032.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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 TabBarExample;
.history/src/common/Tabbar/index_20190416115146.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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 TabBarExample;
.history/src/common/Tabbar/index_20190416115506.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
<a href="#"style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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 TabBarExample;
.history/src/common/Tabbar/index_20190416115511.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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 TabBarExample;
.history/src/common/Tabbar/index_20190416115638.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: false,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
<a href="javascript:;"style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</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 TabBarExample;
.history/src/common/Tabbar/index_20190416115655.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416115713.js 0 → 100644
// import React, { Component } from 'react';
// import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416115720.js 0 → 100644
// import React, { Component } from 'react';
// import { TabBar } from 'antd-mobile';
// class TabBarExample extends Component {
// }
// export default TabBarExample;
.history/src/common/Tabbar/index_20190416140312.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416140335.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false,
};
}
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416140339.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416140812.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
renderContent(pageText) {
let {
state,
dispatch
} = this.props
if (pageText == '首页') {
return (
<Topic gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
);
} else if (pageText == '发布') {
return (
<PublishTopic gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
)
} else if (pageText == '消息') {
return (
<Message gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
)
} else if (pageText == '我的') {
return (
<Login gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
)
}
}
render() {
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="首页"
key="首页"
icon={
<Icon type={require('../images/index.svg')}></Icon>
}
selectedIcon={
<Icon type={require('../images/index-fill.svg')}></Icon>
}
selected={this.state.selectedTab === 'index'}
onPress={() => {
HashMap.put('selectedTab', 'index')
this.setState({
selectedTab: 'index',
});
}}
data-seed="logId"
>
{this.renderContent('首页')}
</TabBar.Item>
</TabBar>
}
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416140906.js 0 → 100644
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
class TabBarExample extends Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
render() {
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
>
<TabBar.Item
title="首页"
key="首页"
icon={
<Icon type={require('../images/index.svg')}></Icon>
}
selectedIcon={
<Icon type={require('../images/index-fill.svg')}></Icon>
}
selected={this.state.selectedTab === 'index'}
onPress={() => {
HashMap.put('selectedTab', 'index')
this.setState({
selectedTab: 'index',
});
}}
data-seed="logId"
>
{this.renderContent('首页')}
</TabBar.Item>
</TabBar>
}
}
export default TabBarExample;
.history/src/common/Tabbar/index_20190416145224.js 0 → 100644
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import './top-tabbar.less';
import { HOST } from '../../const/host'
class TopTabbar extends Component {
constructor(props) {
super(props)
this.state = {
entry: [
{
name: "曲库",
path: `${HOST}/repertoire`,
icon: require('../../icons/music.png')
},
{
name: "发现",
path: `${HOST}/discover`,
icon: require('../../icons/headphones.png')
},
{
name: "我的",
path: `${HOST}/me`,
icon: require('../../icons/user.png')
},
]
}
}
componentDidMount() {
}
render() {
return (
<div id="top-tabbar">
{
this.state.entry.map(v => (
<NavLink
key={v.path}
to={v.path}
activeClassName="current"
>
<div>
<img src={v.icon} alt="" />
</div>
<div>
{v.name}
</div>
</NavLink>
))
}
</div>
)
}
}
export default TopTabbar
\ No newline at end of file
.history/src/common/Tabbar/index_20190416145306.js 0 → 100644
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import Tabbar from './components/Tabbar';
import { HOST } from '../../const/host'
class TopTabbar extends Component {
constructor(props) {
super(props)
this.state = {
entry: [
{
name: "曲库",
path: `${HOST}/repertoire`,
icon: require('../../icons/music.png')
},
{
name: "发现",
path: `${HOST}/discover`,
icon: require('../../icons/headphones.png')
},
{
name: "我的",
path: `${HOST}/me`,
icon: require('../../icons/user.png')
},
]
}
}
componentDidMount() {
}
render() {
return (
<div id="top-tabbar">
{
this.state.entry.map(v => (
<NavLink
key={v.path}
to={v.path}
activeClassName="current"
>
<div>
<img src={v.icon} alt="" />
</div>
<div>
{v.name}
</div>
</NavLink>
))
}
</div>
)
}
}
export default TopTabbar
\ No newline at end of file
.history/src/components/Index/index_20190416182210.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
分类
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/components/Index/index_20190416182223.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/components/Index/index_20190416183742.js 0 → 100644
import React, { Component } from 'react';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
首页
</div>
)
}
}
export default Home;
\ No newline at end of file
.history/src/components/Index/index_20190416183829.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/components/classify/index_20190416182128.js 0 → 100644
import React, { Component } from 'react'
class TodoItem extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
分类
</div>
)
}
handleClick() {
const { handleItemDelete, index } = this.props
handleItemDelete(index);
// this.props.handleItemDelete(this.props.index);
}
}
export default TodoItem
\ No newline at end of file
.history/src/components/classify/index_20190416182133.js 0 → 100644
import React, { Component } from 'react'
class TodoItem extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
分类
</div>
)
}
}
export default TodoItem
\ No newline at end of file
.history/src/components/classify/index_20190416182139.js 0 → 100644
import React, { Component } from 'react';
class TodoItem extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
分类
</div>
)
}
}
export default TodoItem
\ No newline at end of file
.history/src/components/classify/index_20190416182155.js 0 → 100644
import React, { Component } from 'react';
class Classify extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
分类
</div>
)
}
}
export default Classify
\ No newline at end of file
.history/src/components/classify/index_20190416183815.js 0 → 100644
import React, { Component } from 'react';
class Classify extends Component {
render() {
return(
<div>
分类
</div>
)
}
}
export default Classify;
\ No newline at end of file
.history/src/components/my/index_20190416182238.js 0 → 100644
import React, { Component } from 'react';
class My extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
我的
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/my/index_20190416183836.js 0 → 100644
import React, { Component } from 'react';
class My extends Component {
render() {
return (
<div>
我的
</div>
)
}
}
export default My;
\ No newline at end of file
.history/src/components/study/index_20190416182302.js 0 → 100644
import React, { Component } from 'react';
class Study extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
学习
</div>
)
}
}
export default Study;
\ No newline at end of file
.history/src/components/study/index_20190416183842.js 0 → 100644
import React, { Component } from 'react';
class Study extends Component {
render() {
return (
<div>
学习
</div>
)
}
}
export default Study;
\ No newline at end of file
.history/src/index_20190411103719.css 0 → 100644
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.history/src/index_20190416104159.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416143030.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
Provider
} from 'react-redux';
import App from './App';
import Router from './router';
ReactDOM.render(
<Provider store={store}>
<Router />
</Provider>,
document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416143120.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
Provider
} from 'react-redux';
// import App from './App';
import Router from './router';
ReactDOM.render(
<Provider store={store}>
<Router />
</Provider>,
document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416143215.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
Provider
} from 'react-redux';
// import App from './App';
import Router from './router';
ReactDOM.render(
<Provider>
<Router />
</Provider>,
document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416143434.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416160243.css 0 → 100644
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.am-tab-bar-bar{
position: fixed;
}
\ No newline at end of file
.history/src/index_20190416160258.css 0 → 100644
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.am-tab-bar-bar{
position: fixed !important;
}
\ No newline at end of file
.history/src/index_20190416182453.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
ReactDOM.render(
<Provider>
<Router />
</Provider>,
, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416182457.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
ReactDOM.render(
<Provider>
<Router />
</Provider>
, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416183848.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
import { Provider } from 'react-redux';
import './index.css';
// import App from './App';
ReactDOM.render(
<Provider>
<Router />
</Provider>
, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416183935.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
import { Provider } from 'react-redux';
import './index.css';
// import App from './App';
ReactDOM.render(
<Router />
, document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416183947.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
// import { Provider } from 'react-redux';
import './index.css';
// import App from './App';
ReactDOM.render(
<Router />
, document.getElementById('root'));
\ No newline at end of file
.history/src/main_20190416181632.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
}
}
\ No newline at end of file
.history/src/main_20190416181944.js 0 → 100644
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/order' component={order}></Route>
<Route path='/my' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
.history/src/main_20190416182606.js 0 → 100644
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
.history/src/main_20190416183717.js 0 → 100644
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
.history/src/menu_20190416181004.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'gmcp' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="购买车票"
key="gmcp"
icon={<Link to='/buyTicket'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'gmcp' ? true : false}
onPress={() => { this.onPress('gmcp') }}
/>
<TabBar.Item
title="我的订单"
key="wddd"
icon={<Link to='/order'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'wddd' ? true : false}
onPress={() => { this.onPress('wddd') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184030.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/Index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/Index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="我的订单"
key="wddd"
icon={<Link to='/order'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'wddd' ? true : false}
onPress={() => { this.onPress('wddd') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184058.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="我的订单"
key="wddd"
icon={<Link to='/order'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'wddd' ? true : false}
onPress={() => { this.onPress('wddd') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184110.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="wddd"
icon={<Link to='/order'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'wddd' ? true : false}
onPress={() => { this.onPress('wddd') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184135.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184150.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184218.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="个人中心"
key="grzx"
icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'grzx' ? true : false}
onPress={() => { this.onPress('grzx') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416184235.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'home' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416185644.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416185648.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416190045.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
this.setState({ selected: item })
}
render(match) {
let { selected = '/index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === '/index' ? true : false}
onPress={() => { this.onPress('/index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416190137.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = '/index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === '/index' ? true : false}
onPress={() => { this.onPress('/index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416190154.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = '/index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('/index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416190205.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('/index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/menu_20190416190219.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
.history/src/router_20190416112058.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
}
\ No newline at end of file
.history/src/router_20190416112338.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
render() {
const TabbarRender = () => {
switch (window.location.pathname) {
case `${HOST}/`:
return <Tabbar></Tabbar>
case `${HOST}/repertoire`:
return <Tabbar></Tabbar>
case `${HOST}/me`:
return <Tabbar></Tabbar>
case `${HOST}/discover`:
return <Tabbar></Tabbar>
}
return null
};
return (
)
}
}
}
\ No newline at end of file
.history/src/router_20190416112444.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
render() {
return()
}
}
}
\ No newline at end of file
.history/src/router_20190416112530.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
render() {
return(
<div></div>
)
}
}
}
\ No newline at end of file
.history/src/router_20190416112631.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div></div>
)
}
}
\ No newline at end of file
.history/src/router_20190416112954.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div></div>
)
}
}
export default Router;
\ No newline at end of file
.history/src/router_20190416142722.js 0 → 100644
import React from 'react';
import {
Router,
Route,
IndexRoute,
hashHistory
} from 'react-router';
import Index from './components/Index';
import Classify from './components/classify';
import My from './components/my';
import Study from './components/study';
class routes extends React.Component {
render() {
return (
<Router history={hashHistory}>
<Route path='/' component={Index}>
<IndexRoute component={Classify} />
<Route path='/Study' component={Study}></Route>
<Route path='/My' component={My}></Route>
</Route>
</Router>
)
}
}
\ No newline at end of file
.history/src/router_20190416142747.js 0 → 100644
import React from 'react';
import {
Router,
Route,
IndexRoute,
hashHistory
} from 'react-router';
import Index from './components/Index';
import Classify from './components/classify';
import My from './components/my';
import Study from './components/study';
class routes extends React.Component {
render() {
return (
<Router history={hashHistory}>
<Route path='/' component={Index}>
<IndexRoute component={Classify} />
<Route path='/Study' component={Study}></Route>
<Route path='/My' component={My}></Route>
</Route>
</Router>
)
}
}
export default routes;
\ No newline at end of file
.history/src/router_20190416145309.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
const TabbarRender = () => {
switch (window.location.pathname) {
case `${HOST}/`:
return <Tabbar></Tabbar>
case `${HOST}/repertoire`:
return <Tabbar></Tabbar>
case `${HOST}/me`:
return <Tabbar></Tabbar>
case `${HOST}/discover`:
return <Tabbar></Tabbar>
}
return null
};
const MusicPlayerRender = () => {
switch (window.location.pathname) {
case `${HOST}/`:
return <MusicPlayer></MusicPlayer>
case `${HOST}/repertoire`:
return <MusicPlayer></MusicPlayer>
case `${HOST}/me`:
return <MusicPlayer></MusicPlayer>
case `${HOST}/discover`:
return <MusicPlayer></MusicPlayer>
case `${HOST}/playdetail`:
return <MusicPlayer></MusicPlayer>
}
return null
};
return (
<BrowserRouter>
<div>
<TabbarRender></TabbarRender>
<Container></Container>
{/* <Route path="/" component={Container}></Route>*/}
<MusicPlayer></MusicPlayer>
</div>
</BrowserRouter>
)
}
}
\ No newline at end of file
.history/src/router_20190416161600.js 0 → 100644
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
class Router extends Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
}
}
\ No newline at end of file
.history/src/router_20190416182544.js 0 → 100644
import React from 'react'
import { HashRouter as Router, Route } from "react-router-dom";
import Main from './main'
const router = () => (
<Router>
<Route path='/' component={Main}>
</Route>
</Router>
)
export default router;
\ No newline at end of file
package-lock.json
......@@ -3552,6 +3552,15 @@
"object-assign": "^4.1.1"
}
},
"create-react-context": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
"integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
"requires": {
"fbjs": "^0.8.0",
"gud": "^1.0.0"
}
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
......@@ -6147,6 +6156,11 @@
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"gzip-size": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
......@@ -6307,6 +6321,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
"integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^2.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^0.4.0"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
......@@ -6322,6 +6349,14 @@
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
},
"hoist-non-react-statics": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
"integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
"requires": {
"react-is": "^16.7.0"
}
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
......@@ -10791,6 +10826,80 @@
"react-tween-state": "^0.1.5"
}
},
"react-redux": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.0.2.tgz",
"integrity": "sha512-uKRuMgQt8dWbcz0U75oFK5tDo3boyAKrqvf/j94vpqRFFZfyDDy4kofUgloFIGyuKTq2Zz51zgK9RzOTFXk5ew==",
"requires": {
"@babel/runtime": "^7.4.3",
"hoist-non-react-statics": "^3.3.0",
"invariant": "^2.2.4",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^16.8.6"
},
"dependencies": {
"@babel/runtime": {
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
"integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
"requires": {
"regenerator-runtime": "^0.13.2"
}
},
"regenerator-runtime": {
"version": "0.13.2",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
"integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
}
}
},
"react-router": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz",
"integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"create-react-context": "^0.2.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz",
"integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-tween-state": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
......@@ -10869,6 +10978,15 @@
"minimatch": "3.0.4"
}
},
"redux": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.1.tgz",
"integrity": "sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==",
"requires": {
"loose-envify": "^1.4.0",
"symbol-observable": "^1.2.0"
}
},
"regenerate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
......@@ -11105,6 +11223,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"resolve-pathname": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
......@@ -12198,6 +12321,11 @@
}
}
},
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
},
"symbol-tree": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
......@@ -12452,6 +12580,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-invariant": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
"integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
},
"tiny-warning": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
"integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
......@@ -12892,6 +13030,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......
package.json
......@@ -45,6 +45,9 @@
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
......
src/App.css deleted 100644 → 0
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
import React, { Component } from 'react';
import { Button, NavBar, Icon } from 'antd-mobile'
import './App.css';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App 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,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div className="App">
<Button type="primary">primary</Button>
<Button type="primary" inline style={{ marginRight: '4px' }}>inline primary</Button>
<Button type="ghost" inline size="small" style={{ marginRight: '4px' }}>ghost</Button>
<NavBar
mode="light"
icon={<Icon type="left" />}
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<NavBar
mode="dark"
leftContent="Back"
rightContent={[
<Icon key="0" type="search" style={{ marginRight: '16px' }} />,
<Icon key="1" type="ellipsis" />,
]}
>NavBar</NavBar>
<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}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
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'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</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="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</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="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
src/common/Tabbar/index.js 0 → 100644
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import Tabbar from './components/Tabbar';
import { HOST } from '../../const/host'
class TopTabbar extends Component {
constructor(props) {
super(props)
this.state = {
entry: [
{
name: "曲库",
path: `${HOST}/repertoire`,
icon: require('../../icons/music.png')
},
{
name: "发现",
path: `${HOST}/discover`,
icon: require('../../icons/headphones.png')
},
{
name: "我的",
path: `${HOST}/me`,
icon: require('../../icons/user.png')
},
]
}
}
componentDidMount() {
}
render() {
return (
<div id="top-tabbar">
{
this.state.entry.map(v => (
<NavLink
key={v.path}
to={v.path}
activeClassName="current"
>
<div>
<img src={v.icon} alt="" />
</div>
<div>
{v.name}
</div>
</NavLink>
))
}
</div>
)
}
}
export default TopTabbar
\ No newline at end of file
src/components/Index/index.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
src/components/classify/index.js 0 → 100644
import React, { Component } from 'react';
class Classify extends Component {
render() {
return(
<div>
分类
</div>
)
}
}
export default Classify;
\ No newline at end of file
src/components/my/index.js 0 → 100644
import React, { Component } from 'react';
class My extends Component {
render() {
return (
<div>
我的
</div>
)
}
}
export default My;
\ No newline at end of file
src/components/study/index.js 0 → 100644
import React, { Component } from 'react';
class Study extends Component {
render() {
return (
<div>
学习
</div>
)
}
}
export default Study;
\ No newline at end of file
src/index.css
......@@ -12,3 +12,6 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.am-tab-bar-bar{
position: fixed !important;
}
\ No newline at end of file
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
import Router from './router';
// import { Provider } from 'react-redux';
import './index.css';
// import App from './App';
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
ReactDOM.render(
<Router />
, document.getElementById('root'));
\ No newline at end of file
src/logo.svg deleted 100644 → 0
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
src/main.js 0 → 100644
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
src/menu.js 0 → 100644
import React from 'react'
import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';
class menu extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onPress = this.onPress.bind(this);
}
onPress(item) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }}
/>
<TabBar.Item
title="学习"
key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }}
/>
<TabBar.Item
title="我的"
key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }}
/>
</TabBar>
</div>
)
}
}
export default menu;
src/router.js 0 → 100644
import React from 'react'
import { HashRouter as Router, Route } from "react-router-dom";
import Main from './main'
const router = () => (
<Router>
<Route path='/' component={Main}>
</Route>
</Router>
)
export default router;
\ No newline at end of file
src/serviceWorker.js deleted 100644 → 0
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
yarn.lock deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment