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

Question

通过在导航器级别执行以下代码很容易隐藏每个屏幕上的边框

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

但是如何在单个屏幕上隐藏边框？ 我已经尝试了以下但没有效果

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

Answer 1

如果我们想从子组件进行更改，那么我们必须访问父组件的导航道具。

试试下面的代码，它可能对你有帮助：

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

Answer 2

@react-navigation^v6.x您需要在 screenOptions 道具中添加 tabBarStyle: { borderTopWidth: 0, elevation: 0} 以隐藏 ios 和 android 的底部标签栏中的顶部边框。

例如：

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