Taro官网文档上并没有写自定义支付宝小程序tabbar，只有微信小程序的自定义tabbar
支付宝的这个只在他github的issue中提到了能支持，也就是说，Taro的版本需要大于3.6.6才行
image.png
按照官网微信小程序的写法试了一下支付宝小程序，没成功，编译后的目录下没有tabbar文件夹，并且编译报错
image.png
image.png
正解应该是
customize-tab-bar这个目录，而不是custom-tab-bar，把文件夹改个名字即可，换了名字后可以看到编译后的目录下有对应文件了，custom-tab-bar可能是微信端的命名，支付宝端要换成customize-tab-bar，害，文档上也不写
image.png
遇到的坑点
1. CoverImage点击问题
https://github.com/NervJS/taro/blob/next/examples/custom-tabbar-react/src/custom-tab-bar/index.tsx
按照官方demo提供的写法，底部tabbar自定义，其实是用CoverView做的，CoverView里面嵌套CoverImage作为图标，
但是在点击的时候，CoverImage严格来说只是叠放到CoverView上方，并非是父子节点，所以点击到图标的时候，点击事件并不会冒泡到外层CoverView上，尝试过给内层的CoverImage加上onTap事件，CoverView加上onClick事件，点击都执行同一个函数，但是onTap没生效，点击了没反应
所以只能把CoverImage换成普通的Image，只有外层用CoverView，里层用普通的Image和View组件
2. tabbar的items数量限制
假设需求上要求不同的角色对应不同的权限，那么展示的tabbar也不一样，假设3个角色分别对应A，B，C三种Tabbar配置，每种都有4个items。
想法很美好，现实很残酷。
如果用Taro.switchTab去跳转的话，tab页一定得在app.config.ts中定义才可以，这种情况下，3*4=12，要定义12个tab页上去，支付宝这边只能定义5个，也就是说，A，B，C所有可能用到的tab页加起来最多5个。否则用switchTab跳转到第6个开始的页面时，会报错，且卡死
暂无解决方案，只能想办法复用页面，合并掉一些页面，然后找产品经理去把一些不常用的按钮从tabbar挪出去
3. tabbar 高亮选中项
根据github上以及支付宝社区的老哥们描述，调用switchTab时，其实是在新页面新生成了一个tabbar，所以对应的按钮在点击后并不会自动高亮，在tabbar组件里面setState了也没用，因为这是一个新的tabbar实例，有一些方案是用redux之类的工具全局管理高亮选中项，有一些则是用Taro.getTabbar().setState()...之类的方案(我试过了报错)
最后用的方案是在render里面做匹配
根据当前路由地址，和list中的地址匹配，然后findIndex，就可以知道应该高亮第几个了
export default class Index extends Component {
switchTab = (url) => {
console.log(url);
Taro.switchTab({
url: '/' + url,
});
};
render() {
const list = Taro.getStorageSync('role') === 'admin' ? adminList : userList;
const activePath = Taro.getCurrentInstance().router?.path || '';
const activeIndex = list.findIndex((item) => activePath.includes(item.pagePath));
if(activeIndex === -1){
return null;
}
return (
<CoverView className={styles['tab-bar']}>
<CoverView className={styles['tab-bar-border']}></CoverView>
{list.map((item, index) => {
return (
<CoverView key={index} className={styles['tab-bar-item']} onClick={() => this.switchTab(item.pagePath)}>
<Image className={styles['tab-bar-icon']} src={activeIndex === index ? item.selectedIconPath : item.iconPath} />
<View style={{ color: activeIndex === index ? MODAL_TEXT_COLOR : '#000', fontSize: 12 }}>{item.text}</View>
</CoverView>
);
})}
</CoverView>
);
}
}
4. Tabbar组件生命周期
无法在Tabbar里面使用useDidShow或者componentDidShow之类的生命周期，原因就是支付宝不支持
网友评论