React Native的Tab導航實現

在React Native中，可以使用react-navigation庫中的createBottomTabNavigator方法來實現Tab導航。以下是一個簡單的示例：

1. 首先，確保已經安裝了@react-navigation/native和@react-navigation/bottom-tabs庫。如果沒有安裝，可以使用以下命令安裝：

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs

2. 然后，導入所需的庫和組件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

3. 創建一個Tab.Navigator實例，并定義兩個Tab：

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

在這個示例中，我們創建了一個包含兩個Tab的底部Tab導航器。HomeScreen和SettingsScreen分別對應這兩個Tab。

4. 創建HomeScreen和SettingsScreen組件：

// screens/HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

export default HomeScreen;

// screens/SettingsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

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

export default SettingsScreen;

現在，當你運行應用程序時，你應該可以看到一個包含兩個Tab的底部Tab導航器。點擊Tab時，會切換到相應的屏幕。