搜索了大家伙的提问,没有得到一个比较贴合我这边实际情况的答案。
我是使用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>
)
}
this.createSelectorQuery().select('#custom-tabbar').boundingClientRect( ({height}) => { console.log(height) } ).exec()
TARO倒是有提到一句用Taro.createSelectorQuery().in(props.$scope)
但似乎自定义tabbar里的props里也没有这个属性