reactjs - 所有页面的底部标签
问题描述
我知道如果我将第二页设为选项卡,则底部选项卡将呈现。虽然,我不想将它作为一个单独的选项卡,但我只想在所有屏幕上呈现底部选项卡。
另外,为什么当我将其设置为 false 时会显示标题?
解决方案
你所要做的就是这样
- 根堆栈作为选项卡导航器堆栈
- 添加一个选项卡屏幕,其中包含一个 StackNavigator,其中包含主页代码作为顶部堆栈屏幕,然后其余页面也应该在那里
这里显示了一个小吃代码 链接
代码也可以在这里看到:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import SecondPage from './screens/SecondPage';
import Home from './screens/Home'
const Tab = createBottomTabNavigator();
function MyNonTabStack() {
// const dispatch = useDispatch();
// const auth = useSelector((state) => state.auth);
return (
<Stack.Navigator
initialRouteName="Home"
>
<Stack.Screen
name="Home"
component={Home}
options={{
headerShown:false,
}}
/>
<Stack.Screen name="SecondPage" component= {SecondPage} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#F60081',
style: {
backgroundColor: '#FFFFFF',
borderTopColor: 'transparent'
}
}}
>
<Tab.Screen
name="Home"
component={MyNonTabStack}
options={{
headerShown:false,
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
</NavigationContainer>
);
}
const Stack = createStackNavigator();
推荐阅读
- cobol - COBOL ARITH(EXTEND) - COBCH0143S 未知识别分区段
- python - 在 virtualenv 中降级 pip 包
- flutter - 无法从 Firebase DB 接收和存储特定数据的值 - Flutter
- facebook - expo-facebook 未跟踪所有应用安装事件
- vim - 表情符号未在 gtk(?) 中显示,但在使用相同字体的 kde 应用程序中显示
- git - 分离/取消设置本地 git 存储库
- integration - Azure 逻辑应用“Encode to Edifact”要求正文将 UNA 或 UNB 作为第一段
- c# - 剑道网格的内联剑道下拉值不绑定
- android - android jetpack compose中的“remember”和“mutableState”有什么区别?
- image-processing - 如何检查 TIFF 文件是否真正具有 16 位深度