React Native的React Navigation配置

React Navigation是React Native中一個強大的導航庫，它可以幫助你為你的應用創建多個屏幕并進行導航。以下是一個基本的React Navigation配置示例：

首先，你需要安裝所需的依賴項：

npm install @react-navigation/native @react-navigation/stack

然后，你可以創建一個StackNavigator，它允許你在應用中創建堆疊的屏幕。以下是一個簡單的示例：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在上面的示例中，我們首先導入了所需的模塊，并創建了一個StackNavigator。然后，我們定義了兩個屏幕組件：HomeScreen和DetailsScreen。最后，我們在App組件中使用NavigationContainer和Stack.Navigator來配置我們的導航系統。

在上面的示例中，我們設置了兩個屏幕：Home和Details。默認情況下，應用程序將顯示Home屏幕。要導航到Details屏幕，你可以使用navigation.navigate()方法。例如，你可以在HomeScreen組件中添加一個按鈕，當用戶點擊該按鈕時，應用程序將導航到Details屏幕。

這只是React Navigation的基本配置示例。你還可以使用其他導航庫（如TabNavigator、DrawerNavigator等）來創建更復雜的導航系統。你還可以使用React Navigation的許多其他功能和選項來定制你的導航體驗，例如設置導航欄標題、添加自定義導航欄樣式等。