Files
react-navigation/packages/stack/example/src/StackWithDrawer.tsx
2019-09-22 02:17:55 +02:00

73 lines
1.6 KiB
TypeScript

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import {
createStackNavigator,
NavigationStackScreenProps,
} from 'react-navigation-stack';
import {
createDrawerNavigator,
DrawerContentComponentProps,
} from 'react-navigation-drawer';
import {
createBottomTabNavigator,
NavigationTabScreenProps,
} from 'react-navigation-tabs';
function Menu({ navigation }: DrawerContentComponentProps) {
return (
<View style={{ flex: 1 }}>
<Button
title="Open on top"
onPress={() => {
// @ts-ignore
navigation.navigate('Top');
}}
/>
</View>
);
}
class Fake extends React.Component<
NavigationTabScreenProps | NavigationStackScreenProps
> {
static navigationOptions = ({
navigation,
}: NavigationTabScreenProps | NavigationStackScreenProps) => ({
title: navigation.getParam('title'),
});
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 20 }}>
{this.props.navigation.getParam('title')}
</Text>
</View>
);
}
}
const Tab = createBottomTabNavigator({
Home: { screen: Fake, params: { title: 'Home' } },
Other: { screen: Fake, params: { title: 'Other' } },
});
const Drawer = createDrawerNavigator(
{
TabScreen: {
screen: Tab,
},
},
{
contentComponent: props => <Menu {...props} />,
navigationOptions: { title: 'Example' },
}
);
const App = createStackNavigator({
Drawer: { screen: Drawer },
Top: { screen: Fake, params: { title: 'Top' } },
});
export default App;