1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- import * as React from 'react';
- import { View, Text, Button } from 'react-native';
- import { createAppContainer } from 'react-navigation';
- import { createBottomTabNavigator } from 'react-navigation-tabs';
- import {
- createStackNavigator,
- NavigationStackProp,
- } from 'react-navigation-stack';
- import { SafeAreaProvider } from 'react-native-safe-area-context';
-
- type NavigationScreenProps = {
- navigation: NavigationStackProp<{}, {}>;
- };
-
- function HomeScreen({ navigation }: NavigationScreenProps) {
- return (
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>Home Screen</Text>
- <Button
- title="Go to Details"
- onPress={() => navigation.navigate('Details')}
- />
- </View>
- );
- }
-
- function SettingsScreen({ navigation }: NavigationScreenProps) {
- return (
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>Settings Screen</Text>
- <Button
- title="Go to Details"
- onPress={() => navigation.navigate('Details')}
- />
- </View>
- );
- }
-
- const TabNavigator = createBottomTabNavigator({
- Home: HomeScreen,
- Settings: SettingsScreen,
- });
-
- function DetailsScreen({ navigation }: NavigationScreenProps) {
- 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 AppNavigator = createStackNavigator(
- {
- Tabs: TabNavigator,
- Details: DetailsScreen,
- },
- {
- initialRouteName: 'Tabs',
- },
- );
-
- const AppContainer = createAppContainer(AppNavigator);
-
- export default function ReactNavigation4Example() {
- return (
- <SafeAreaProvider>
- <AppContainer />
- </SafeAreaProvider>
- );
- }
|