javascript - How to remove white space between the tabs in react navigation top bar - Stack Overflow

admin管理员组

文章数量:1374798

How do you remove white space between the tabs in react-navigation top bar. So what should happen is the tab size should adjust based on the screen size.

This is what my navigation looks like at the moment.

You can see that the tabs are really big. They are taking too much space. How can I get those white spaces so the tabs are only taking enough size to fit the tab name.

I've tried styling Tab.Navigator with no luck. For example Ive tried the following:

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >
      <Tab.Screen name="All" ponent={Home} />
      <Tab.Screen name="Hot" ponent={Home} />
      <Tab.Screen name="Winners" ponent={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTabNavigation" ponent={HomeTabNavigation} />
    </Stack.Navigator>
  );
};

export default HomeNavigation;

How do you remove white space between the tabs in react-navigation top bar. So what should happen is the tab size should adjust based on the screen size.

This is what my navigation looks like at the moment.

You can see that the tabs are really big. They are taking too much space. How can I get those white spaces so the tabs are only taking enough size to fit the tab name.

I've tried styling Tab.Navigator with no luck. For example Ive tried the following:

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        scrollEnabled: true,
        labelStyle: { padding: 0, margin: 0, border: 0 },
        tabStyle: { padding: 0, margin: 0, border: 0 },
      }}
      lazy={true}
      style={{ padding: 0, margin: 0, border: 0 }}
    >
      <Tab.Screen name="All" ponent={Home} />
      <Tab.Screen name="Hot" ponent={Home} />
      <Tab.Screen name="Winners" ponent={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeTabNavigation" ponent={HomeTabNavigation} />
    </Stack.Navigator>
  );
};

export default HomeNavigation;

• javascript
• reactjs
• react-native
• react-native-navigation
• react-native-tabnavigator

Share Improve this question Follow edited Apr 24, 2020 at 22:55 breaktop asked Apr 24, 2020 at 22:42 breaktopbreaktop 2,02966 gold badges4242 silver badges6363 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I had the same problem just a couple of days ago.

Here is my solution for you:

import React from "react";
import { useWindowDimensions } from "react-native"; // <-- add this hook
import { createStackNavigator } from "@react-navigation/stack";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

import Home from "../screens/Home";

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();

const tabsConfig = () => {
    const { width } = useWindowDimensions()
    return {
        lazy: true,
        tabBarOptions: {
            showLabel: true,
            tabStyle: {
                // here you can set the tab width , in this case , 3 tabs , width / 3
                width: width / 3,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf: 'center',
            },
            indicatorStyle: {
                borderWidth: 1,
                borderColor: 'red',
            }
        },
    }
}

const HomeTabNavigation = () => {
  return (
    <Tab.Navigator {...tabsConfig()}>
      <Tab.Screen name="All" ponent={Home} />
      <Tab.Screen name="Hot" ponent={Home} />
      <Tab.Screen name="Winners" ponent={Home} />
    </Tab.Navigator>
  );
};

const HomeNavigation = () => {
  return (
      <Stack.Navigator>
        <Stack.Screen name="HomeTabNavigation" ponent={HomeTabNavigation} />
      </Stack.Navigator>
  );
};

export default HomeNavigation;

Set width to auto like this:

screenOptions={{
   tabBarItemStyle: {width: "auto"}
}}

You can adjust the height by simply using :

<Tab.Navigator
      initialRouteName="All"
      tabBarOptions={{
        style: {
          height: 40,
       }
      }}
>

Make shadowOffset and elevation as 0 in the homeTabNavigator style

本文标签： javascriptHow to remove white space between the tabs in react navigation top barStack Overflow