import { Image } from 'react-native';
import { TextInputMask } from 'react-native-masked-text'
import {
Container, Header, Title, Content, Footer,
FooterTab, Button, Left, Right, Body, Icon, Text,
Accordion, Card, CardItem, Thumbnail, ListItem,
CheckBox, DatePicker, DeckSwiper, View, Fab,
Badge, Form, Item, Input, Label, Picker, Textarea,
Switch, Radio, Spinner, Tab, Tabs, TabHeading,
ScrollableTab, H1, H2, H3, Drawer,
} from 'native-base';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';
import icon_json from './assets/selection.json'
const icon_ttf = require("./assets/icomoon.ttf");
const CustomIcon = createIconSetFromIcoMoon(icon_json, '', icon_ttf);
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
category: 1
};
}
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};
render() {
return (
<Drawer ref={(ref) => { this.drawer = ref; }}
content={
<Container style={{ backgroundColor: '#1C2833' }}>
<Header>
<Body>
<Title>Commodity Price</Title>
</Body>
<Right>
<Button transparent onPress={() => this.closeDrawer()}>
<Icon name='arrow-back' />
</Button>
</Right>
</Header>
<Content>
<ListItem icon noBorder onPress={() => { this.setState({ category: 1 }); this.closeDrawer() }}>
<Left>
<Icon type='FontAwesome5' name="fire" style={{ color: 'white' }} />
</Left>
<Body>
<Text style={{ color: 'white' }}>Energy</Text>
</Body>
</ListItem>
<ListItem icon noBorder onPress={() => { this.setState({ category: 2 }); this.closeDrawer() }}>
<Left>
<CustomIcon name='gold' size={24} color="white"></CustomIcon>
</Left>
<Body>
<Text style={{ color: 'white' }}>Metals</Text>
</Body>
</ListItem>
<ListItem icon noBorder onPress={() => { this.setState({ category: 3 }); this.closeDrawer() }}>
<Left>
<CustomIcon name='grain' size={24} color="white"></CustomIcon>
</Left>
<Body>
<Text style={{ color: 'white' }}>Grains</Text>
</Body>
</ListItem>
<ListItem icon noBorder onPress={() => { this.setState({ category: 4 }); this.closeDrawer() }}>
<Left>
<CustomIcon name='coffee' size={24} color="white"></CustomIcon>
</Left>
<Body>
<Text style={{ color: 'white' }}>Softs</Text>
</Body>
</ListItem>
<ListItem icon noBorder onPress={() => { this.setState({ category: 5 }); this.closeDrawer() }}>
<Left>
<CustomIcon name='live_cattle' size={24} color="white"></CustomIcon>
</Left>
<Body>
<Text style={{ color: 'white' }}>Livestock</Text>
</Body>
</ListItem>
</Content>
</Container>
}
onClose={() => this.closeDrawer()} >
<Container style={{ backgroundColor: '#1C2833' }}>
<Header>
<Left>
<Button transparent onPress={() => this.openDrawer()}>
<Icon name='menu' />
</Button>
</Left>
<Body style={{ alignItems: 'center' }}>
<Title>
{
this.state.category === 1 ? 'Energy' :
this.state.category === 2 ? 'Metals' :
this.state.category === 3 ? 'Grains' :
this.state.category === 4 ? 'Softs' :
this.state.category === 5 ? 'Livestock' :
'drawer'
}
</Title>
</Body>
<Right></Right>
</Header>
<Content>
<ListItem icon noBorder style={{ height: 100 }}>
<Left><CustomIcon name='live_cattle' size={50} color="white"></CustomIcon></Left>
<Body>
<Text style={{ color: 'gold' }}>Live Cattle</Text>
<Text style={{ color: 'white' }}>135.30{' '}
<CustomIcon name='down' size={15} color="red"></CustomIcon>
<Text style={{ color: 'red' }}>7.08 (4.97%)</Text>
</Text>
<Text note numberOfLines={1} style={{ color: 'white' }}>Open: 142.38 Close: 135.30</Text>
</Body>
<Right style={{ paddingTop: 50 }}>
<Text note style={{ color: 'white' }}>cent/pound{"\n"}Jan 29, 9:55AM</Text>
</Right>
</ListItem>
<ListItem icon noBorder style={{ height: 100 }}>
<Left><CustomIcon name='feeder_cattle' size={50} color="white"></CustomIcon></Left>
<Body>
<Text style={{ color: 'gold' }}>Feeder Cattle</Text>
<Text style={{ color: 'white' }}>142.82{' '}
<CustomIcon name='up' size={15} color="green"></CustomIcon>
<Text style={{ color: 'green' }}>1.38 (0.97%)</Text>
</Text>
<Text note numberOfLines={1} style={{ color: 'white' }}>Open: 144.08 Close: 141.45</Text>
</Body>
<Right style={{ paddingTop: 50 }}>
<Text note style={{ color: 'white' }}>cent/pound{"\n"}Jan 29, 9:55AM</Text>
</Right>
</ListItem>
<ListItem icon noBorder style={{ height: 100 }}>
<Left><CustomIcon name='hog' size={50} color="white"></CustomIcon></Left>
<Body>
<Text style={{ color: 'gold' }}>Lean Hog</Text>
<Text style={{ color: 'white' }}>64.30{' '}
<CustomIcon name='down' size={15} color="red"></CustomIcon>
<Text style={{ color: 'red' }}>4.52 (6.57%)</Text>
</Text>
<Text note numberOfLines={1} style={{ color: 'white' }}>Open: 66.50 Close: 68.82</Text>
</Body>
<Right style={{ paddingTop: 50 }}>
<Text note style={{ color: 'white' }}>cent/pound{"\n"}Jan 29, 12:04PM</Text>
</Right>
</ListItem>
</Content>
</Container>
</Drawer>
);
}
}
reference:
http://chuanshuoge2.blogspot.com/2020/01/nativebase-drawer.html
No comments:
Post a Comment