由于業(yè)務需求，產品需要自定義tabbar，一直用taro-rn? mobx模式編寫代碼，用起來還行，但是編譯速度極慢，主包無論怎么分包都還是快2M，導致dev模式下根本沒辦法預覽，坑已經(jīng)掉進去了，無法棄·····
tabbar自定義。
網(wǎng)上找了很多方法，發(fā)現(xiàn)
componentDidShow(){
if(typeof this.$scope.getTabBar==='function'&&this.$scope.getTabBar()){
this.$scope.getTabBar().$component.setState({selected:0})
}
}
taro 3.0.14 沒有$scope? 也沒有getTabBar方法.....坑！
最后在getCurrentPage 方法返回中找到了getTabBar ，? 但是無論怎么setData都無效
const page = getCurrentPages()[0]
? ? if (typeof page.getTabBar === 'function' && page.getTabBar()) {
? ? ? ? console.log(page.getTabBar())
? ? ? ? page.getTabBar().setData({
? ? ? ? ? ? selected: 1
? ? ? ? })
? ? }
無奈，最后分析其原理，上面這串代碼在做什么？? 其實是拿到了tabbar實例，修改其index，
那如果我能用store內的屬性注入來修改index是不是一樣的效果？
do it！
給tabbar文件綁定一個store。
store.js
import { observable, action } from "mobx";
class TabbarStore {
? //從后臺獲取來的數(shù)據(jù)拆分成兩個數(shù)組，用于頁面的左分類和右列表
? ? @observable.ref index = 0
? ? @action.bound
? ? setIndex = (index) => {
? ? ? ? this.index = index
? ? }
}
export default new TabbarStore();
然后tabbar文件
import Taro, { getCurrentInstance } from '@tarojs/taro'
import React, { Component } from 'react'
import { View, CoverView, CoverImage, Text, Radio } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import { AtTabs, AtTabsPane, AtCurtain } from 'taro-ui'
import './index.scss'
@inject('store')
@observer
class YCTabbar extends Component {
? ? constructor(props) {
? ? ? ? super(props)
? ? ? ? this.state = {
? ? ? ? ? ? selected: 0,
? ? ? ? ? ? color: 'rgba(68, 68, 68, 1)',
? ? ? ? ? ? selectedColor: 'rgba(68, 68, 68, 1)',
? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? pagePath: 'pages/componentsHome/index',
? ? ? ? ? ? ? ? ? ? text: '首頁',
? ? ? ? ? ? ? ? ? ? iconPath: '../assets/tab_home.png',
? ? ? ? ? ? ? ? ? ? selectedIconPath: '../assets/tab_home_selected.png'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? pagePath: 'pages/my/index',
? ? ? ? ? ? ? ? ? ? text: '我的',
? ? ? ? ? ? ? ? ? ? iconPath: '../assets/tab_cate.png',
? ? ? ? ? ? ? ? ? ? selectedIconPath: '../assets/tab_cate_selected.png'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? }
? ? handleTab(path){
? ? ? ? console.log(path)
? ? ? ? Taro.switchTab({
? ? ? ? ? ? url:'../../' + path
? ? ? ? })
? ? }
? ? render() {
? ? ? ? const { list, selected,selectedColor,color } = this.state
? ? ? ? const { store : { tabbarStore : {index}}} = this.props
? ? ? ? console.log('當前index',index)
? ? ? ? return (
? ? ? ? ? ? <CoverView className="tab-bar">
? ? ? ? ? ? ? ? <CoverView className="tab-bar-border"></CoverView>
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? list && list.map((item,index1) => (
? ? ? ? ? ? ? ? ? ? ? ? <CoverView className="tab-bar-item" onClick={() => this.handleTab(item.pagePath,index1)} key={index1}>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <CoverImage className="cover-img" src={ index == index1 ?? item.selectedIconPath : item.iconPath} ></CoverImage>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <CoverView className="cover-text" style={'color:' + index1 === index ? color : selectedColor}>{item.text}</CoverView>
? ? ? ? ? ? ? ? ? ? ? ? </CoverView>
? ? ? ? ? ? ? ? ? ? ))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </CoverView>
? ? ? ? )
? ? }
}
export default YCTabbar
之后在頁面內的componentDidShow 中去修改index即可
componentDidShow() {
? ? ? ? const page = getCurrentPages()[0]
? ? ? ? console.log('gettabbar ',page)
? ? ? ? const {store : {tabbarStore : { setIndex }}} = this.props
? ? ? ? setIndex(0)
? ? }
再說一次，taro is shit ，fuck you taro！
