React Native的App內導航設計

在React Native中，有多種方法可以實現App內導航。以下是一些建議：

1. 使用React Navigation庫

React Navigation是React Native中最流行的導航庫。它提供了多種導航類型，如堆棧導航、選項卡導航、抽屜導航等。要使用React Navigation，首先需要安裝它：

npm install @react-navigation/native

然后，安裝所需的依賴項：

npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

接下來，創建一個導航容器并設置導航：

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

const Stack = createStackNavigator();

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

export default App;

2. 使用React Native的內置Router

React Native內置了一個簡單的路由器，可以通過<Linking> API實現導航。要使用內置路由器，首先需要導入Linking：

import { Linking } from 'react-native';

然后，創建一個navigationState對象來存儲當前的路由狀態：

const navigationState = {
  index: 0,
  routes: [
    { name: 'Home', component: HomeScreen },
    { name: 'Details', component: DetailsScreen },
  ],
};

接下來，創建一個NavigationView組件，并將其包裹在NavigationContainer中：

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <NavigationView
        navigationState={navigationState}
        style={{ flex: 1 }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </NavigationView>
    </NavigationContainer>
  );
}

export default App;

3. 使用第三方庫

除了React Navigation之外，還有許多其他第三方庫可以實現App內導航，如react-native-router-flux、native-base等。這些庫的使用方法各有不同，具體可以參考它們的官方文檔。

總之，React Native中有多種方法可以實現App內導航，可以根據項目需求選擇合適的導航庫。