快捷導(dǎo)航

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

更新時(shí)間：2023年08月31日 11:57:52 作者：故意避開(kāi)

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

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

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

所用技術(shù)

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

解決方案：使用 React 的 useContext

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

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

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

useContext 創(chuàng)建上下文

在應(yī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 來(lái)獲取和設(shè)置選中狀態(tài)。那么下面我們來(lái)創(chuàng)建一個(gè)自定義組件TabBar

首先在app.config.js 這樣配置主要是tabBar中的custom要為true隱藏默認(rèn)的Tabbar 也是為了后續(xù)跳轉(zhuǎn)做準(zhǔ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: "主頁(yè)",
      },
      {
        pagePath: "pages/classification/index",
        text: "分類",
      },
      {
        pagePath: "pages/shoppingCart/index",
        text: "購(gòu)物車",
      },
      {
        pagePath: "pages/user/index",
        text: "我的",
      },
    ],
  },
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
});

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

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

// 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: '首頁(yè)',
                url: 'pages/index/index',
            },
            {
                id: 1,
                icon: 'qr',
                text: '分類',
                url: 'pages/classification/indexe',
            },
            {
                id: 2,
                icon: 'shopping-cart-o',
                text: '購(gòu)物車',
                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>
    )
}

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