mirror of
https://github.com/status-im/react-navigation.git
synced 2025-02-24 17:18:09 +00:00
[Playground] Add TabsInDrawer example (#930)
This commit is contained in:
parent
b49b2c1b62
commit
2b307c754a
@ -15,6 +15,7 @@ import { StackNavigator } from 'react-navigation';
|
||||
import Banner from './Banner';
|
||||
import CustomTabs from './CustomTabs';
|
||||
import Drawer from './Drawer';
|
||||
import TabsInDrawer from './TabsInDrawer';
|
||||
import ModalStack from './ModalStack';
|
||||
import StacksInTabs from './StacksInTabs';
|
||||
import StacksOverTabs from './StacksOverTabs';
|
||||
@ -37,6 +38,11 @@ const ExampleRoutes = {
|
||||
description: 'Android-style drawer navigation',
|
||||
screen: Drawer,
|
||||
},
|
||||
TabsInDrawer: {
|
||||
name: 'Drawer + Tabs Example',
|
||||
description: 'A drawer combined with tabs',
|
||||
screen: TabsInDrawer,
|
||||
},
|
||||
CustomTabs: {
|
||||
name: 'Custom Tabs',
|
||||
description: 'Custom tabs with tab router',
|
||||
|
59
examples/NavigationPlayground/js/TabsInDrawer.js
Normal file
59
examples/NavigationPlayground/js/TabsInDrawer.js
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @flow
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
} from 'react-native';
|
||||
import {
|
||||
TabNavigator,
|
||||
DrawerNavigator,
|
||||
} from 'react-navigation';
|
||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||
import SimpleTabs from './SimpleTabs';
|
||||
import StacksOverTabs from './StacksOverTabs';
|
||||
|
||||
const TabsInDrawer = DrawerNavigator({
|
||||
SimpleTabs: {
|
||||
screen: SimpleTabs,
|
||||
navigationOptions: {
|
||||
drawer: () => ({
|
||||
label: 'Simple Tabs',
|
||||
icon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="filter-1"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
},
|
||||
},
|
||||
StacksOverTabs: {
|
||||
screen: StacksOverTabs,
|
||||
navigationOptions: {
|
||||
drawer: () => ({
|
||||
label: 'Stacks Over Tabs',
|
||||
icon: ({ tintColor }) => (
|
||||
<MaterialIcons
|
||||
name="filter-2"
|
||||
size={24}
|
||||
style={{ color: tintColor }}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginTop: Platform.OS === 'ios' ? 20 : 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default TabsInDrawer;
|
Loading…
x
Reference in New Issue
Block a user