1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- import * as React from 'react';
- import { Text, View, Button } from 'react-native';
- import { NavigationContainer } from '@react-navigation/native';
- import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
- import {
- createStackNavigator,
- StackScreenProps,
- } from '@react-navigation/stack';
-
- type Routes = {
- Home: undefined;
- Details: undefined;
- Settings: undefined;
- };
-
- function HomeScreen({ navigation }: StackScreenProps<Routes, 'Home'>) {
- return (
- <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
- <Text>Home Screen</Text>
- <Button
- title="Go to Details"
- onPress={() => navigation.navigate('Details')}
- />
- </View>
- );
- }
-
- function SettingsScreen({ navigation }: StackScreenProps<Routes, 'Settings'>) {
- return (
- <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
- <Text>Settings Screen</Text>
- <Button
- title="Go to Details"
- onPress={() => navigation.navigate('Details')}
- />
- </View>
- );
- }
-
- const Tab = createBottomTabNavigator();
-
- function TabsScreen() {
- return (
- <Tab.Navigator>
- <Tab.Screen name="Home" component={HomeScreen} />
- <Tab.Screen name="Settings" component={SettingsScreen} />
- </Tab.Navigator>
- );
- }
-
- function DetailsScreen({ navigation }: StackScreenProps<Routes, 'Details'>) {
- return (
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>Details Screen</Text>
- <Button
- title="Go to Details... again"
- onPress={() => navigation.push('Details')}
- />
- <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
- <Button title="Go back" onPress={() => navigation.goBack()} />
- </View>
- );
- }
-
- const Stack = createStackNavigator();
-
- export default function ReactNavigation5Example() {
- return (
- <NavigationContainer>
- <Stack.Navigator>
- <Stack.Screen name="Tabs" component={TabsScreen} />
- <Stack.Screen name="Details" component={DetailsScreen} />
- </Stack.Navigator>
- </NavigationContainer>
- );
- }
|