在 Taro 项目中创建底部 Tabs (Bottom Tabs)

在 Taro 项目中创建底部 Tabs (Bottom Tabs) 通常使用 Taro 提供的 Tab Bar 配置。以下是如何在 Taro 项目中配置底部 Tabs 的步骤：

1. 配置 Tab Bar

在 app.config.js 或 app.config.ts 文件中配置 Tab Bar。此文件是 Taro 项目的配置文件，用于定义 Tab Bar 结构和样式。

export default {
  pages: [
    'pages/index/index',
    'pages/page1/index',
    'pages/page2/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    color: '#000',
    selectedColor: '#6190E8',
    backgroundColor: '#fff',
    borderStyle: 'black',
    list: [{
      pagePath: 'pages/index/index',
      text: '首页',
      iconPath: './assets/tab-home.png',
      selectedIconPath: './assets/tab-home-active.png'
    }, {
      pagePath: 'pages/page1/index',
      text: '页面1',
      iconPath: './assets/tab-page1.png',
      selectedIconPath: './assets/tab-page1-active.png'
    }, {
      pagePath: 'pages/page2/index',
      text: '页面2',
      iconPath: './assets/tab-page2.png',
      selectedIconPath: './assets/tab-page2-active.png'
    }]
  }
}

2. 创建页面

确保在 pages 文件夹中创建与 app.config.js 中 pages 配置一致的页面。例如：

• pages/index/index.js
• pages/page1/index.js
• pages/page2/index.js

每个页面可以有简单的内容，如下所示：

// pages/index/index.js
import React from 'react'
import { View, Text } from '@tarojs/components'

const Index = () => {
  return (
    <View>
      <Text>首页</Text>
    </View>
  )
}

export default Index

// pages/page1/index.js
import React from 'react'
import { View, Text } from '@tarojs/components'

const Page1 = () => {
  return (
    <View>
      <Text>页面1</Text>
    </View>
  )
}

export default Page1

// pages/page2/index.js
import React from 'react'
import { View, Text } from '@tarojs/components'

const Page2 = () => {
  return (
    <View>
      <Text>页面2</Text>
    </View>
  )
}

export default Page2

3. 添加图标

在项目的 assets 文件夹中添加 Tab Bar 需要的图标，并在 app.config.js 中正确配置图标路径。

例如，假设图标存放在 src/assets/ 文件夹中：

• tab-home.png
• tab-home-active.png
• tab-page1.png
• tab-page1-active.png
• tab-page2.png
• tab-page2-active.png

4. 运行项目

确保所有配置正确并运行 Taro 项目：

npm run dev:weapp

或者

yarn dev:weapp

这样，你就可以在 Taro 项目中实现底部 Tabs，并且每个 Tab 都对应一个页面。