如何删除 react-navigation 顶部栏中选项卡之间的空白。所以应该发生的是标签大小应该根据屏幕大小进行调整。
这就是我的导航目前的样子。
您可以看到选项卡非常大。他们占用了太多空间。我怎样才能得到这些空格,以便选项卡只占用足够的大小以适应选项卡名称。
我试过造型Tab.Navigator
但没有运气。例如,我尝试了以下方法:
<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" component={Home} />
<Tab.Screen name="Hot" component={Home} />
<Tab.Screen name="Winners" component={Home} />
</Tab.Navigator>
);
};
const HomeNavigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="HomeTabNavigation" component={HomeTabNavigation} />
</Stack.Navigator>
);
};
export default HomeNavigation;