React Navigation如何在单个屏幕上隐藏标签栏顶部边框

Question

It is easy to hide the border on every Screen by doing the following code on Navigator level

<Tab.Navigator
   tabBarOptions={{
      style: {
         borderTopWidth: 0,
      },
   }}
>

But how to hide the border on a single Screen? I've already tried the following but it has no effect

React.useLayoutEffect(() => {
   navigation.setOptions({
      tabBarOptions: {
         style: {
            borderTopWidth: 0,
         },
      },
   });
}, [navigation]);

Answer 1

If we would like to make changes from the child component then we have to access the parent component navigation props.

Have a try with the below code which might help you:

React.useLayoutEffect(() => {
   navigation.dangerouslyGetParent().setOptions({
      tabBarOptions: {
         style: {
            borderTopWidth: 0,
         },
      },
   });
}, [navigation]);

Answer 2

@react-navigation^v6.x you need to add tabBarStyle: { borderTopWidth: 0, elevation: 0} in the screenOptions prop to hide top border in bottom tab bar for both ios and android.

For example:

 <Tab.Navigator screenOptions={{ tabBarStyle: { borderTopWidth: 0, elevation: 0, }, }}> </Tab.Navigator>