zoukankan      html  css  js  c++  java
  • react-navigation 5.x createBottomTabNavigator 动态修改tabbar的页面标题

    版本:

    expo v39.x
    react-navigation 5.x
    react native hook
    Typescript

    默认页面标题是调取 name字段的值

    期望是标题分别显示对应tabbar的标题,如:首页、关注、热门

    解决方案:

    修改 index.tsx 文件

    注意,这里不能在BottomTabNavigator.tsx上修改,会造成错误 Warning: Cannot update a component from inside the function body of a different component.

    正确写法如下:

    //...
    function RootNavigator() {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="Root"
            component={BottomTabNavigator}
            options={({ route }: { route: any }) => {
              const routeName = route.state?.routes[route.state?.index]?.name;
              let title = '首页';
              if (routeName === 'Home') {
                title = '首页';
              } else if (routeName === 'Look') {
                title = '关注';
              } else if (routeName === 'Hot') {
                title = '热门';
              }
              return {
                title: title,
                headerStyle: {
                  backgroundColor: Colors.primaryColor,
                },
                headerTintColor: '#fff',
              };
            }}
          />
          // ...
    </Stack.Navigator>
    )
    }
    

    通过 routeName 来手动设置每个页面的标题

  • 相关阅读:
    Fiddler filter 过滤隐藏css、js、图片等
    十三、单元测试
    十二、文件操作
    Go_客户信息管理系统
    十一、面向对象编程_下
    十、面向对象编程_上
    九、map
    八、排序和查找
    七、数组和切片
    六、函数、包和错误处理
  • 原文地址:https://www.cnblogs.com/unclefang/p/13847244.html
Copyright © 2011-2022 走看看