android - react-native 在底部标签导航中隐藏屏幕的特定标签
问题描述
我总共有 6 个屏幕,但我只想在屏幕下方的底部标签导航中放置 4 个屏幕(教程、文件上传、详细信息搜索和配置文件)。我使用“ tabBarLabel: () => null ”来隐藏登录和注册屏幕的标签。我的底部标签现在有 4 个标签,但只有标签消失了,仍然占据了那个位置。
const Tabs = createBottomTabNavigator();
const Stack = createStackNavigator();
const FileUploadStack = ({route, navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="File Upload" component={FileUpload} initialParams={{ itemId: 42 }} options={{
title:''}} />
</Stack.Navigator>
);
const DetailsSearchStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Details Search" component={DetailsSearch} options={{
title:''}} />
</Stack.Navigator>
);
const LoginStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Login" component={Login} options={{
title:''}} />
</Stack.Navigator>
);
const RegisterStack = ({navigation}) => (
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Register" component={Register} options={{
title:'' }} />
</Stack.Navigator>
);
const TutorialStack = ({navigation}) => (
<ThemeContextProvider>
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
}
}}>
<Stack.Screen name="Tutorial" component={Tutorial} options={{
title:'' }} />
</Stack.Navigator>
</ThemeContextProvider>
);
export default function App() {
const [value1, setValue1] = useState("");
const [value2, setValue2] = useState("");
return (
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name = "Tutorial" component={Tutorial} options={{ tabBarVisible: false, header: null}}/>
<Tabs.Screen name= "Login" component={Login} options={{ tabBarVisible: false, tabBarLabel: () => null}}/>
<Tabs.Screen name= "Register" component={Register} options={{ tabBarVisible: false,tabBarLabel: () => null }}/>
<Tabs.Screen name= "File Upload" component={FileUpload} />
<Tabs.Screen name= "Details Search" component={DetailsSearch} />
<Tabs.Screen name = "Profile" component={User} option={{ tabBarLabel: 'Profile',
tabBarIcon: ({ color }) => ( <View>
<Icon name={"ios-person"} color={color} size={25}/> </View>)}}/>
</Tabs.Navigator>
{/* <Stack.Navigator initialRouteName="Tutorial">
<Stack.Screen name="Tutorial" component={Tutorial} options={{ headerShown: false }}/>
<Stack.Screen name="Login" component={Login}/>
<Stack.Screen name="Register" component={Register}/>
<Stack.Screen name="File Upload" component={FileUpload} />
<Stack.Screen name="Details Search" component={DetailsSearch}/>
</Stack.Navigator> */}
{/* <FlatList
data={data}
renderItem={({ item }) => (
<Text>{item.field1}, {item.field2}</Text>
)}
/> */}
<StatusBar style="auto" />
</NavigationContainer>
);
}
解决方案
您将必须为 tabBarButton 返回 null ,如下所示,这将从标签栏中隐藏整个按钮
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarButton: () => null,
}}
/>
推荐阅读
- assembly - 我如何编写一个在 NASM 16 位实模式下打印空终止字符串的函数?
- android - 是否可以避免崩溃 RemoteServiceException: Bad notification(...) on app update?
- material-ui - Material-ui XGrid 在向组件添加useApiRef时停止渲染
- lombok - Lombok @Getter(lazy=true) 似乎不起作用
- ios - AVPlayerItemVideoOutput 在寻找视频合成后停止传送帧
- javascript - 如何让 javascript 读取 laravel 资产?
- oracle - ORA-00936 缺少 SDO_GEOMETRY 插入命令的表达式
- php - 检查具有空值的数组,它将我作为值返回
- c++ - 给定 C++ 中的大小,如何将数组拆分为 n 个块?
- javascript - 初始化/onInit 函数后,角度属性变得未定义