收藏
回答

自定义tabbar的高度如何测量出实际的值?

搜索了大家伙的提问,没有得到一个比较贴合我这边实际情况的答案。

我是使用TARO在实现一个自定义tabbar,用的是函数组件的写法。

我尝试用createSelectorQuery去查询,得到的结果始终是null,我的代码如下。

请问有下伙伴有碰到类似情况吗?

import React, {
  useState, useEffect, useLayoutEffect, useRef, Component,
} from 'react'
import { View, Text, CoverView } from '@tarojs/components'
import Taro, { createSelectorQuery, useReady } from '@tarojs/taro'
import config from '../app.config'
import IconFont from '../assets/iconfont'
import styles from './index.module.less'
import { MobXProviderContext, observer } from 'mobx-react'
import { StoreType } from '@/app'

function CustomTabBar(props) {
  const { store } = React.useContext<{ store:StoreType }>(MobXProviderContext as any)


  const { systemStore } = store
  const pages = Taro.getCurrentPages()
  const currentPage = pages[0]


  const [activeIndex, setActiveIndex] = useState(0)
  const menuList = config.tabBar.list


  // 切换tab
  const onSwitchTab = (url) => {
    Taro.switchTab({
      url,
    })
  }


  // 处理bar的active
  useEffect(() => {
    const index = menuList.findIndex((item) => item.pagePath === currentPage.route)
    if (index > -1) {
      setActiveIndex(index)
    }
  }, [currentPage.route])

//!!!!就是在这里尝试测量,但始终得到的是null. 有搜索到的答案说是要执行.in(this), 但这里是一个函数组件,this应该是无效的。
  useEffect(() => {
    setTimeout(() => {
      createSelectorQuery()
        .select('#custom-tabbar')
        .boundingClientRect((rect) => {
          console.log(rect, 'test....') //为null
        })
        .exec()
    }, 500) // 加了延时也不行
  }, [])


// 渲染TAB
  const renderMenu = () => menuList.map((menuItem, menuIndex) => (
        <View
          key={menuItem.pagePath}
          className={`${styles.tabBarItem} ${activeIndex === menuIndex ? 'active' : ''}`}
          onClick={() => { onSwitchTab(`/${menuItem.pagePath}`) }}
        >
          <IconFont name={(activeIndex === menuIndex ? menuItem.activeIcon : menuItem.icon) as any} size={32} color={activeIndex === menuIndex ? config.tabBar.selectedColor : config.tabBar.color} />
          <Text style={{ color: activeIndex === menuIndex ? config.tabBar.selectedColor : config.tabBar.color }}>
          {menuItem.text}
          </Text>
        </View>
  ))


  return (
    <View id="custom-tabbar" >
      {renderMenu()}
    </View>
  )
}
回答关注问题邀请回答
收藏

1 个回答

  • 从君华
    从君华
    2023-07-04
    this.createSelectorQuery().select('#custom-tabbar').boundingClientRect(
        ({height}) => {
            console.log(height)
        }
    ).exec()
    
    2023-07-04
    有用
    回复 2
    • Kent
      Kent
      2023-07-04
      这里的this 在函数组件里是undefined
      TARO倒是有提到一句用Taro.createSelectorQuery().in(props.$scope)
      但似乎自定义tabbar里的props里也没有这个属性
      2023-07-04
      回复
    • 从君华
      从君华
      2023-07-04回复Kent
      说明createSelectorQuery()的this指向有问题,尝试解决指向。用什么Taro啊,原生已经够折腾了,还要再让第三方套上一层,想想都难受😣
      2023-07-04
      回复
登录 后发表内容