scroll tabs
press a tab
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,
} from 'native-base';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Container>
<Header hasTabs>
<Body style={{ flex: 1, alignItems: 'center' }}>
<Title>Tabs</Title>
</Body>
</Header>
<Tabs renderTabBar={() => <ScrollableTab />}>
<Tab heading={<TabHeading><Icon name="camera" /><Text>Camera</Text></TabHeading>}>
<Content padder>
<Text>tab1 content</Text>
</Content>
</Tab>
<Tab heading={<TabHeading><Text>No Icon</Text></TabHeading>}>
<Content padder>
<Text>tab2 content</Text>
</Content>
</Tab>
<Tab heading={<TabHeading><Icon name="apps" /></TabHeading>}>
<Content padder>
<Text>tab3 content</Text>
</Content>
</Tab>
<Tab heading="Tab4">
<Content padder>
<Text>tab4 content</Text>
</Content>
</Tab>
<Tab heading="Tab5">
<Content padder>
<Text>tab5 content</Text>
</Content>
</Tab>
<Tab heading="Tab6">
<Content padder>
<Text>tab6 content</Text>
</Content>
</Tab>
<Tab heading="Tab7">
<Content padder>
<Text>tab7 content</Text>
</Content>
</Tab>
</Tabs>
</Container>
);
}
}
No comments:
Post a Comment