【问题标题】:How to disable BottomTab display on one of the screens如何在其中一个屏幕上禁用底部选项卡显示
【发布时间】:2020-06-09 09:41:16
【问题描述】:

我在这里使用BottomTab进行这样的导航

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from './Home'
import Second from './Second'
import Other from './Other'

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{
        showLabel: true,
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          borderTopWidth: 0,
          elevation: 0,
        }
      }}>
        <Tab.Screen name="Home" component={Home}/>
        <Tab.Screen name="Second" component={Second}/>
        <Tab.Screen name="Other" component={Other} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

我想:

  • HomeOther屏幕上BottomTab正常可见

  • Second 屏幕上,BottomBar 消失(此处您只能单击返回返回另一个屏幕,BottomTab 可见)

如何获得这种效果? (相机在这个屏幕上打开,所以我不想让 BottomBar 可见))

编辑:

应该和图片一样

在这种情况下(中键)我们只能撤消

【问题讨论】:

    标签: javascript react-native


    【解决方案1】:

    将组件创建为一组不需要bottom tab 的屏幕。将此组件提供给TabNavigatorSee here

    function App() {
      return (
        <NavigationContainer>
          <Tab.Navigator tabBarOptions={{
            showLabel: true,
            style: {
              backgroundColor: 'transparent',
              position: 'absolute',
              borderTopWidth: 0,
              elevation: 0,
            }
          }}>
            <Tab.Screen name="Home" component={Home}/>
            <Tab.Screen name="Second" component={SecondScreen}/>
            <Tab.Screen name="Other" component={Other} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }
    

    第二屏组件

    const SecondScreen = () => (
          <Stack.Navigator>
           <Stack.Screen name="Second" component={Second}
        </Stack.Navigator>
    )
    

    【讨论】:

    • 没什么变化。底栏可见
    • 我添加了图像应该如何工作。文档中的情况略有不同
    猜你喜欢
    • 1970-01-01
    • 2019-04-15
    • 2017-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多