如何在其中一个屏幕上禁用BottomTab显示

时间:2020-06-09 09:41:16

标签: javascript react-native

我在这里使用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可见)

编辑:

它应该与图片中的一样

enter image description here

在这种情况下(中间按钮),我们只能撤消

1 个答案:

答案 0 :(得分:0)

将一个组件创建为一组不需要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>
)