123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- 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 { createNativeStackNavigator } from 'react-native-screens/native-stack';
- import type { 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 = createNativeStackNavigator();
-
- export default function NativeStackExample() {
- return (
- <NavigationContainer>
- <Stack.Navigator>
- <Stack.Screen name="Tabs" component={TabsScreen} />
- <Stack.Screen name="Details" component={DetailsScreen} />
- </Stack.Navigator>
- </NavigationContainer>
- );
- }
|