mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-08 22:44:14 +08:00
73 lines
1.6 KiB
TypeScript
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;
|