# React 基礎 - 路由

官方文檔：https://reactnavigation.org/docs/getting-started

## 安裝路由

安裝 `react-navigation/native`：

npm install @react-navigation/native
npm install @react-navigation/native-stack
expo install react-native-screens react-native-safe-area-context

## 基本使用

import * as React from 'react';
import { View, Button, Text } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
        <Text>酷酷</Text>
        <Button
            title="Go to 咪咪"
            onPress={() => navigation.navigate('Details')}
        />
    </View>
  );
}

const DetailScreen = ({ navigation }) => {
  return (
    <View>
        <Text>咪咪</Text>
        <Button
            title="Go to 酷酷"
            onPress={() => navigation.navigate('Home')}
        />
    </View>
  );
}

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;