我在这里使用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;
我想:
在Home
和Other
屏幕上, BottomTab 正常可见
在Second
屏幕上, BottomBar 消失(在这里您只能单击以返回到显示 BottomTab 的另一个屏幕)
如何获得这种效果? (相机在此屏幕上打开,所以我不希望BottomBar可见)
编辑:
它应该与图片中的一样
在这种情况下(中间按钮),我们只能撤消
答案 0 :(得分:0)
将一个组件创建为一组不需要bottom tab
的屏幕。将此组件提供给TabNavigator
。 See 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>
)