如何在 React Native 中创建自定义的可点击和可滚动的顶部标签导航？

Question

I am using react navigation v6. What I want is a clickable and scrollable tabs in top tab navigator? In 3rd party Modules, there are many issues so that's why currently I am not using that.

Answer 1

import React from 'react'
import {StatusBar} from 'react-native'

import {NavigationContainer} from '@react-navigation/native'

import {GestureHandlerRootView} from 'react-native-gesture-handler'
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs'
import HomeScreen from './screens/HomeScreen'
import LivingRoom from './screens/LivingRoom'
import Fav from './screens/Fav'
import Settings from './screens/Settings'

const Tab = createMaterialTopTabNavigator()

const AppRoot = () => {
  return (
    <GestureHandlerRootView className="flex-1">
      <StatusBar hidden />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            tabBarScrollEnabled: true,
            tabBarIndicator: () => null,
            tabBarStyle: {
              backgroundColor: '#000',
            },
            tabBarItemStyle: {
              width: 'auto',
              alignItems: 'flex-start',
            },
            tabBarLabelStyle: {
              fontSize: 30,
              fontFamily: 'Satoshi-Black',
              color: '#fff',
              textTransform: 'capitalize',
            },
          }}
          sceneContainerStyle={{backgroundColor: '#000'}}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Living Room" component={LivingRoom} />
          <Tab.Screen name="Fav" component={Fav} />
          <Tab.Screen name="Settings" component={Settings} />
        </Tab.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  )
}

export default AppRoot