TabBar组件如何跳转页面？

一个大长腿2023-08-27 9:26

1、先引入

2、假数据

复制代码

const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'todo',
      title: '待办',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'message',
      title: '消息',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'personalCenter',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const [activeKey, setActiveKey] = useState('todo')

3、获取假数据的key进行渲染输出

复制代码

  <TabBar>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>

4、给大的tabBar加一个点击事件

5、根据key值进行判断和跳转

注意：自己的页面路径要跟tabs里面的路径一样，要先分清tabs里面的数据是哪一个页面，然后根据自己的页面将tabs里面的key进行更改