如何制作可滚动的顶部选项卡导航器（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;

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

How to make scrollable top tab Navigator (React Navigation v6)

react-native

react-navigation