Блог

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

 
import * as React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import AccountsScreen from "../screens/AccountsScreen";
import FavouritesScreen from "../screens/FavouritesScreen";
import HomeScreen from "../screens/HomeScreen";
import SettingsScreen from "../screens/SettingsScreen";
import TrendsScreen from "../screens/TrendsScreen";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { Dimensions } from "react-native";
import Income from "../screens/Income";
import Expense from "../screens/Expense";

const Drawer = createDrawerNavigator();
const Tab = createMaterialTopTabNavigator();

CategoriesTabScreens = () => {
  return (
    <Tab.Navigator
      initialRouteName="Income"
      tabBarOptions={{
        indicatorStyle: {
          height: Dimensions.get("window").height,
          backgroundColor: "#29416F",
        },
        activeTintColor: "#fff",
        inactiveTintColor: "#333",
      }}
    >
      <Tab.Screen name="Income" component={Income} />
      <Tab.Screen name="Expense" component={Expense} />
    </Tab.Navigator>
  );
};

const AppDrawer = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: true,
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Accounts" component={AccountsScreen} />
      <Drawer.Screen name="Categories" component={CategoriesTabScreens} />
      <Drawer.Screen name="Trends" component={TrendsScreen} />
      <Drawer.Screen name="Favourites" component={FavouritesScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
};

export default AppDrawer;
  

Вывод

результат, который я хочу

Просто используйте Style prop в Tab.navigator

Вот закуска https://snack.expo.io/@anthowm/drawer-navigation-|-react-navigation

 const Tab = createMaterialTopTabNavigator();
const CategoriesTabScreens = () => {
  return (
    <Tab.Navigator
      initialRouteName="Income"
      tabBarOptions={{
        indicatorStyle: {
          height: Dimensions.get("window").height,
          backgroundColor: "#29416F",
        },
        activeTintColor: "#fff",
        inactiveTintColor: "#333",
      }}
      style={{paddingHorizontal: 24, marginTop: 40}}
    >
      <Tab.Screen name="Income" component={() => (<View style={{marginTop: 20}}><Text>INCOME</Text></View>)} />
      <Tab.Screen name="Expense" component={() => (<View style={{marginTop: 20}}><Text>EXPENSE</Text></View>)} />
    </Tab.Navigator>
  );
};