如何在 React 中隐藏特定屏幕上的底部导航栏

小能豆

如何在 React 中隐藏特定屏幕上的底部导航栏

javascript

如何在 React Native 中隐藏特定屏幕上的底部导航栏？

我正在使用 React Native 和 React Native Navigation 来构建我的应用程序。目前，我有三个底部选项卡：主页、上传视频和消息。选择“上传视频”选项卡后，我想呈现“上传视频”组件并隐藏该屏幕上的底部选项卡，并显示带有“取消”（将它们带回 HomeView）和“发布”按钮的标题（这已经完成）。我很难隐藏此特定屏幕上的标签栏。

我尝试按照此处的代码（如何隐藏特定屏幕上的底部标签栏（react-navigation 3.x））；然而，最终没有成功，我无法通过这种方式隐藏任何屏幕上的底部标签。

目前，我将其作为我的底部导航器：

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

任何见解都将非常有帮助，谢谢。

阅读 61

2024-05-31

共1个答案

小能豆

为了实现在特定屏幕（在本例中为上传视频屏幕）上隐藏底部标签栏的所需行为，您可以使用navigationOptionsReact Navigation 提供的功能。

您可以按照以下方法修改代码来实现此目的：

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

// Import your screens
import HomeView from './HomeView';
import VideoSelectionView from './VideoSelectionView';
import SearchView from './SearchView';

// Create a stack navigator for the Upload Video screen
const UploadVideoStack = createStackNavigator({
  UploadVideo: {
    screen: VideoSelectionView,
    navigationOptions: {
      headerShown: true, // Show the header with 'Cancel' and 'Post' buttons
    },
  },
});

// Create a bottom tab navigator
const BottomTabNavigator = createBottomTabNavigator({
  HomeView: {
    screen: HomeView,
  },
  UploadVideo: {
    screen: UploadVideoStack, // Use the stack navigator for the Upload Video screen
    navigationOptions: {
      tabBarVisible: false, // Hide the bottom tab bar on this screen
    },
  },
  Messages: {
    screen: SearchView,
  }
});

export default BottomTabNavigator;

在此设置中：

UploadVideoStack我们为“上传视频”屏幕 ( )创建了一个堆栈导航器 ( ) VideoSelectionView。这样，我们就可以在此屏幕上显示带有“取消”和“发布”按钮的标题。
我们tabBarVisible: false在“上传视频”屏幕中设置navigationOptions隐藏专门用于此屏幕的底部标签栏。
其他屏幕（HomeView 和 Messages）继续照常显示底部标签栏。

此设置应实现所需的行为，即隐藏“上传视频”屏幕上的底部标签栏，同时仍在其他屏幕上显示它。

2024-05-31