|
| 1 | +import React from 'react'; |
| 2 | +import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native'; |
| 3 | +import { NavigationContainer, useNavigation } from '@react-navigation/native'; |
| 4 | +import { createNativeStackNavigator } from '@react-navigation/native-stack'; |
| 5 | + |
| 6 | +const Stack = createNativeStackNavigator(); |
| 7 | +const NestedStack = createNativeStackNavigator(); |
| 8 | + |
| 9 | +export default function App() { |
| 10 | + return ( |
| 11 | + <NavigationContainer> |
| 12 | + <Stack.Navigator screenOptions={{ animation: 'slide_from_left' }}> |
| 13 | + <Stack.Screen name="Home" component={HomeScreen} /> |
| 14 | + <Stack.Screen name="DetailsStack" component={DetailsScreen} /> |
| 15 | + <Stack.Screen name="NestedStack" component={NestedStackScreen} /> |
| 16 | + </Stack.Navigator> |
| 17 | + </NavigationContainer> |
| 18 | + ); |
| 19 | +} |
| 20 | + |
| 21 | +function NestedStackScreen() { |
| 22 | + return ( |
| 23 | + <NestedStack.Navigator> |
| 24 | + <NestedStack.Screen name="NSHome" component={HomeScreen} /> |
| 25 | + <NestedStack.Screen name="NSDetailsStack" component={DetailsScreen} /> |
| 26 | + </NestedStack.Navigator> |
| 27 | + ); |
| 28 | +} |
| 29 | + |
| 30 | +function HomeScreen() { |
| 31 | + const navigation = useNavigation(); |
| 32 | + return ( |
| 33 | + <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> |
| 34 | + <Text>Home Screen</Text> |
| 35 | + <Button |
| 36 | + title="Go to Details" |
| 37 | + onPress={() => navigation.navigate('DetailsStack')} |
| 38 | + /> |
| 39 | + <Button |
| 40 | + title="Go to NestedStack" |
| 41 | + onPress={() => navigation.navigate('NestedStack')} |
| 42 | + /> |
| 43 | + <Button |
| 44 | + title="Go to NestedStack Details" |
| 45 | + onPress={() => navigation.navigate('NSDetailsStack')} |
| 46 | + /> |
| 47 | + </View> |
| 48 | + ); |
| 49 | +} |
| 50 | + |
| 51 | +function DetailsScreen() { |
| 52 | + return ( |
| 53 | + <View style={{ flex: 1, alignItems: 'center' }}> |
| 54 | + {new Array(10).fill(0).map((_, i) => ( |
| 55 | + <Pressable |
| 56 | + key={i.toString()} |
| 57 | + onPress={() => { |
| 58 | + Alert.alert('Pressed!'); |
| 59 | + }} |
| 60 | + style={({ pressed }) => [ |
| 61 | + { |
| 62 | + backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white', |
| 63 | + }, |
| 64 | + styles.wrapperCustom, |
| 65 | + ]}> |
| 66 | + {({ pressed }) => ( |
| 67 | + <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text> |
| 68 | + )} |
| 69 | + </Pressable> |
| 70 | + ))} |
| 71 | + </View> |
| 72 | + ); |
| 73 | +} |
| 74 | + |
| 75 | +const styles = StyleSheet.create({ |
| 76 | + wrapperCustom: { |
| 77 | + width: '100%', |
| 78 | + height: 100, |
| 79 | + marginHorizontal: 30, |
| 80 | + borderRadius: 10, |
| 81 | + margin: 10, |
| 82 | + }, |
| 83 | + text: { |
| 84 | + fontSize: 20, |
| 85 | + color: 'black', |
| 86 | + }, |
| 87 | +}); |
| 88 | + |
0 commit comments