所用技术

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

背景

在应用 Taro 进行小程序开发时，底部 TabBar 是十分常见的页面导航形式。然而，有时候咱们可能会遇到一个问题：底部 TabBar 的选中状态异样，须要点击两次能力胜利选中某个标签。本文将介绍如何应用 React 的 useContext 来解决这个问题，同时联合 Taro 的自定义 TabBar 来实现失常的底部导航。

解决方案

应用 React 的 useContext

在 Taro 中，咱们能够应用 useContext 钩子来创立和应用上下文。上下文可能在组件之间共享数据，这里咱们将应用它来解决底部选中异样的问题。

  1. 首先，咱们须要创立一个上下文对象，用来治理底部 TabBar 的选中状态。
// UserContext.jsimport { createContext } from 'react';const UserContext = createContext();export default UserContext;
  1. 在利用的入口文件app.js中，咱们将应用 useContext 创立上下文，并将底部 TabBar 的选中状态放入上下文中。
// app.jsimport { 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;

  1. 当初，咱们能够在任何组件中应用 useContext 来获取和设置选中状态。那么上面咱们来创立一个自定义组件TabBar

    • 首先在app.config.js 这样配置 次要是tabBar中的custom要为true暗藏默认的Tabbar 也是为了后续跳转做筹备
//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",  },});
  • 而后在Src目录下创立 一个文件名为 custom-tab-bar 的文件夹 而后在文件夹里创立一个index.js 的文件 小程序会主动获取到此文件夹的index.js文件而后渲染到页面上
// custom-tab-bar/index.jsimport { 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，咱们能够将选中状态在不同的组件之间共享，从而解决底部选中异样问题。这样，点击底部标签时就能够失常切换选中状态了。

总结

应用 Taro React，咱们能够应用 useContext 钩子来解决底部 TabBar 选中异样的问题。通过创立上下文并共享选中状态，咱们能够实现失常的底部导航，提供更好的用户体验。

心愿本文可能帮忙你解决底部选中异样问题，并在 Taro 小程序开发中有更晦涩的导航体验。如果你在实践中遇到问题或有更多倡议，欢送在评论中分享！