[React Native]使用 react-navigation 搭建App頂部導航欄

之前用過一段時間的 react-native-scrollable-tab-view，前段時間貌似是因為升級了 Android 的 Gradle 版本，這東西點擊 tab 切換選項卡後會報錯，以前是可以的。

在不懂解決時，只好去尋找其他第三方 npm 包。

後來發現，之前的 react-navigation 全家桶除了能實現底部 tab， 也能實現頂部 tab。

直接上代碼，複製粘貼就能用。

首先要安裝 2 個 npm 包。

npm i -S @react-navigation/material-top-tabs react-native-tab-view
建個 js 文件，開始搬運。
import React from 'react';
import {View, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

export default () => {
  return (
    <Tab.Navigator
      initialRouteName={tabConfig[0].key}
      screenOptions={{
        tabBarActiveTintColor: '#2eb0f9',
        tabBarInactiveTintColor: '#323233',
        tabBarLabelStyle: {fontSize: 16},
        tabBarStyle: {backgroundColor: '#fff'},
        tabBarIndicatorStyle: {backgroundColor: '#2eb0f9'},
      }}>
      {[
        {
          tabLabel: '技術',
          name: 'tech',
        },
        {
          tabLabel: '體驗',
          name: 'experience',
        },
        {
          tabLabel: '設計',
          name: 'design',
        },
      ].map(tab => (
        <Tab.Screen
          name={tab.name}
          options={{tabBarLabel: tab.tabLabel || ''}}
          component={() => (
            <View>
              <Text>{tab.tabLabel || ''}</Text>
            </View>
          )}
        />
      ))}
    </Tab.Navigator>
  )
}