如何制作可滚动的顶部选项卡导航器（React Navigation v6）

Question

我在用react navigation v6。我想要的是顶部选项卡导航器中的可滚动选项卡？在第 3 方模块中，存在很多问题，这就是为什么我目前不使用它。

Answer 1

用这个。"@react-navigation/material-top-tabs";库，这是示例

import React from "react";
import { screens } from "../../constants";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Booking from "./components/Booking";
import Payments from "./components/Payments";
import Cancellations from "./components/Cancellations";
import Refunds from "./components/Refunds";
import Instructorquestion from "./components/Instructorquestion";

const Tab = createMaterialTopTabNavigator();
const Faq = () => {
  return (
    <Tab.Navigator

      screenOptions={{ tabBarScrollEnabled: true,tabBarIndicatorStyle:{
          backgroundColor:"blue",
          height:8,
         
      } }}
      sceneContainerStyle={{ backgroundColor: "white" }}
      
    >
      <Tab.Screen name={screens.BOOKINGS} component={Booking} />
      <Tab.Screen name={screens.PAYMENTS} component={Payments} />
      <Tab.Screen name={screens.CANCELLATIONS} component={Cancellations} />
      <Tab.Screen name={screens.REFUNDS} component={Refunds} />
      <Tab.Screen name={screens.INSTUCTORQUESTION} component={Instructorquestion}  options={{ tabBarLabel: 'Instructor Questions' }} />
     
    </Tab.Navigator>
  );
};

export default Faq;

Answer 2

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={{ //use this config
            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