TabBar组件如何跳转页面?

1、先引入

2、假数据

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

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

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

  
          {tabs.map(item => (
            
          ))}
        

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

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

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

TabBar组件如何跳转页面?_第1张图片 

 

你可能感兴趣的:(java,前端,linux)