StackNavigation 嵌套 TabNavigation

最新推荐文章于 2024-02-21 15:15:17 发布

原创

最新推荐文章于 2024-02-21 15:15:17 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ReactNative #React Navigation #Navigation嵌套 #Title居中

本文介绍了如何在React Native中使用StackNavigation嵌套TabNavigation来实现复杂导航场景，特别是在多个Tab构成主页并能跳转到子页面的应用上。文中详细讨论了在设置title属性后标题未显示的问题，并提供了解决方案，包括在iOS和Android平台上让标题居中的方法。

StackNavigation 嵌套 TabNavigation

使用场景

由多个Tab构成主页，再由主页跳转到子页面的这个场景在很多APP上都可以看到。
StackNavigation嵌套TabNavigation1

功能实现

实现这个功能可以采用StackNavigation嵌套TabNavigation的方式。

const TabNavigation = createBottomTabNavigator(
    {
   
   
        Active: {
   
   
            screen: ActivityView,
            navigationOptions: {
   
   
                tabBarLabel: "广场",
            }
        },
        SecondPage: {
   
   
            screen: Tab2Component,
            navigationOptions: {
   
   
                tabBarLabel: "密聊",
            }
        },
        ThirdPage: {
   
   
            screen: Tab3Component,
            navigationOptions: {
   
   
                tabBarLabel: "关注"
            }
        },
        Personnel: {
   
   
            screen: Personal,
            navigationOptions: {
   
   
                tabBarLabel: "我"
            }
        }
    },
    {
   
   
        defaultNavigationOptions: (