Skip to content

M
mr-julyedu
Commit b1531688 by baiguangyao
Options

修改路由

parent dfc67096
Showing with 4899 additions and 0 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;
src/main.js 0 → 100644
This diff is collapsed. Click to expand it.
src/menu.js 0 → 100644
This diff is collapsed. Click to expand it.
src/router.js 0 → 100644
This diff is collapsed. Click to expand it.
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