Как сделать навигатор с прокручиваемой верхней вкладкой (React Navigation v6)

#react-native #react-navigation

Вопрос:

Я использую react navigation v6 . Что мне нужно, так это прокручиваемые вкладки в навигаторе верхних вкладок? В сторонних модулях есть много проблем, поэтому в настоящее время я этим не пользуюсь.

введите описание изображения здесь

Ответ №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;
 

Комментарии:

1. ознакомьтесь с документацией и с помощью опций вы можете управлять стилем каждой вкладки