reference:
https://stackoverflow.com/questions/42855674/implement-drawer-from-native-base-in-react-native-app
https://github.com/GeekyAnts/NativeBase/issues/1199
https://chuanshuoge2.blogspot.com/2020/01/nativebase-list.html
https://oblador.github.io/react-native-vector-icons/
custom Icon
https://docs.expo.io/versions/latest/guides/icons/
https://docs.expo.io/versions/latest/guides/using-custom-fonts/#using-custom-fonts
download svg icon, rename it to gold.svg
import gold.svg, click generate font
extract generated zip file
copy selection.json, icomoon.ttf to project folder assets
//create custom icon with ttf and json file, try it out
import React, { Component } from 'react';
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 gold_json from './assets/gold.json'
const gold_ttf = require("./assets/gold.ttf");
const GoldIcon = createIconSetFromIcoMoon(gold_json, '', gold_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 }) }}>
<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 }) }}>
<Left>
<GoldIcon name='gold' size={24} color="white"></GoldIcon>
</Left>
<Body>
<Text style={{ color: 'white' }}>Metals</Text>
</Body>
</ListItem>
</Content>
</Container>
}
onClose={() => this.closeDrawer()} >
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.openDrawer()}>
<Icon name='menu' />
</Button>
</Left>
<Body style={{ alignItems: 'center' }}>
<Title>Drawer</Title>
</Body>
<Right></Right>
</Header>
<Content>
<H1>Header One</H1>
<H2>Header Two</H2>
<H3>Header Three</H3>
<Text>Default</Text>
</Content>
</Container>
</Drawer>
);
}
}
custom icon is displayed
No comments:
Post a Comment