Taro?React自定義TabBar使用useContext解決底部選中異常

更新時間：2023年08月31日 11:57:52 作者：故意避開

這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點兩次才能選中的問題)示例詳解，有需要的朋友可以借鑒參考下

TabBar 的選中狀態(tài)異常

在使用 Taro 進行小程序開發(fā)時，底部 TabBar 是非常常見的頁面導航方式。然而，有時候我們可能會遇到一個問題：底部 TabBar 的選中狀態(tài)異常，需要點擊兩次才能成功選中某個標簽。本文將介紹如何使用 React 的 useContext 來解決這個問題，同時結(jié)合 Taro 的自定義 TabBar 來實現(xiàn)正常的底部導航。

所用技術

Taro，React HooKs(useContext  , createContext)，@antmjs/vantui(這是UI組件)

解決方案：使用 React 的 useContext

在 Taro 中，我們可以使用 useContext 鉤子來創(chuàng)建和使用上下文。上下文能夠在組件之間共享數(shù)據(jù)，這里我們將使用它來解決底部選中異常的問題。

創(chuàng)建上下文對象，管理底部TabBar選中狀態(tài)

// UserContext.js
import { createContext } from 'react';
const UserContext = createContext();
export default UserContext;

useContext 創(chuàng)建上下文

在應用的入口文件app.js中，我們將使用 useContext 創(chuàng)建上下文，并將底部 TabBar 的選中狀態(tài)放入上下文中。

// app.js
import { useState } from 'react';
import Taro, { createContext, Provider } from '@tarojs/taro';
import './app.scss';
import UserContext from './UserContext';
function App({ children }) {
  const [selectedTab, setSelectedTab] = useState(0);
  return (
    <UserContext.Provider value={{ selectedTab, setSelectedTab }}>
      {children}
    </UserContext.Provider>
  );
}
export default App;

自定義組件TabBar

現(xiàn)在，我們可以在任何組件中使用 useContext 來獲取和設置選中狀態(tài)。那么下面我們來創(chuàng)建一個自定義組件TabBar

首先在app.config.js 這樣配置主要是tabBar中的custom要為true隱藏默認的Tabbar 也是為了后續(xù)跳轉(zhuǎn)做準備

//app.config.js 
export default defineAppConfig({
  pages: [
    "pages/index/index",
    "pages/classification/index",
    "pages/shoppingCart/index",
    "pages/user/index",
  ],
  tabBar: {
    custom: true,
    list: [
      {
        pagePath: "pages/index/index",
        text: "主頁",
      },
      {
        pagePath: "pages/classification/index",
        text: "分類",
      },
      {
        pagePath: "pages/shoppingCart/index",
        text: "購物車",
      },
      {
        pagePath: "pages/user/index",
        text: "我的",
      },
    ],
  },
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
});

創(chuàng)建custom-tab-bar文件夾

然后在Src目錄下創(chuàng)建一個文件名為 custom-tab-bar 的文件夾然后在文件夾里創(chuàng)建一個index.js 的文件小程序會自動獲取到此文件夾的index.js文件然后渲染到頁面上

// custom-tab-bar/index.js
import { Tabbar, TabbarItem } from '@antmjs/vantui'
import Taro from '@tarojs/taro'
import React, { useEffect, useRef, useState } from 'react'
import { useContext } from 'react';
import UserContext from '../component/UserContext';
export default function index() {
    const { selectedTab, setSelectedTab} = useContext(UserContext);
    const [tabData, setTabData] = useState({
        list: [
            {
                id: 0,
                icon: 'home-o',
                text: '首頁',
                url: 'pages/index/index',
            },
            {
                id: 1,
                icon: 'qr',
                text: '分類',
                url: 'pages/classification/indexe',
            },
            {
                id: 2,
                icon: 'shopping-cart-o',
                text: '購物車',
                url: 'pages/shoppingCart/index',
            },
            {
                id: 3,
                icon: 'manager-o',
                text: '我的',
                url: 'pages/user/index',
            },
        ]
    })
    const onChange = (e) => {
        setSelectedTab(e.detail)
        if (e.detail == 0) {
            Taro.switchTab({
                url: '/pages/index/index'
            })
        } else if (e.detail == 1) {
            Taro.switchTab({
                url: '/pages/classification/index'
            })
        } else if (e.detail == 2) {
            Taro.switchTab({
                url: '/pages/shoppingCart/index'
            })
        } else if (e.detail == 3) {
            Taro.switchTab({
                url: '/pages/user/index'
            })
        }
    }
    return (
        <Tabbar active={selectedTab} onChange={onChange}>
            {tabData.list.map(Item => {
                return <TabbarItem key={Item.id} icon={Item.icon}>
                    {Item.text}
                </TabbarItem>
            })}
        </Tabbar>
    )
}

通過使用 useContext，我們可以將選中狀態(tài)在不同的組件之間共享，從而解決底部選中異常問題。這樣，點擊底部標簽時就可以正常切換選中狀態(tài)了。