Tuya Developer Forum

Code: Select all

import React, { useState } from 'react';
import { View, Icon } from '@ray-js/ray';
import Tabbar from '@ray-js/components-ty-tabbar';
import styles from './index.module.less';
import SubDeviceInfo from '../sub/index'; // 引入 SubDeviceInfo 组件
import DeviceInfo from '../dev/index'; // 引入 DeviceInfo 组件
import AllDeviceInfo from '../all/index'; // 引入 AllDeviceInfo 组件
import Four from '../four/index'; // 引入 AllDeviceInfo 组件

const Page1 = () => <View>页面1内容</View>;
const Page2 = () => <View>页面2内容</View>;
const Page3 = () => <View>页面3内容</View>;
const Page4 = () => <View>页面4内容</View>;

export default () => {
  const [activeTab, setActiveTab] = useState(0);

  const renderContent = () => {
    switch (activeTab) {
      case 0:
        return <DeviceInfo />; // 显示 DeviceInfo 内容
      case 1:
        return <SubDeviceInfo meshId="your-mesh-id" />; // 显示 SubDeviceInfo 内容
      case 2:
        return <AllDeviceInfo />; // 显示 AllDeviceInfo 内容
      case 3:
        return <Four />; // 显示 Page4 内容
      default:
        return <Page1 />; // 默认显示 Page1 内容
    }
  };

  return (
    <View className={styles.container}>
      <View className={styles.content}>
        {renderContent()}
      </View>
      <Tabbar className={styles.tabbar} style={{ backgroundColor: '#ffffff', borderTop: '1px solid #e0e0e0' }}>
        <Tabbar.TabItem
          icon={<Icon type="icon-a-sunmaxfill" />}
          onClick={() => setActiveTab(0)}
          style={{ backgroundColor: activeTab === 0 ? 'gray' : 'transparent' }}
        >
          当前设备
        </Tabbar.TabItem>
        <Tabbar.TabItem
          icon={<Icon type="icon-a-cloudhailfill" />}
          onClick={() => setActiveTab(1)}
          style={{ backgroundColor: activeTab === 1 ? 'gray' : 'transparent' }}
        >
          子设备
        </Tabbar.TabItem>
        <Tabbar.TabItem
          icon={<Icon type="icon-a-cloudsunrainfill" />}
          onClick={() => setActiveTab(2)}
          style={{ backgroundColor: activeTab === 2 ? 'gray' : 'transparent' }}
        >
          全部设备
        </Tabbar.TabItem>
        <Tabbar.TabItem
          icon={<Icon type="icon-a-moonstarsfill" />}
          onClick={() => setActiveTab(3)}
          style={{ backgroundColor: activeTab === 3 ? 'gray' : 'transparent' }}
        >
          测试
        </Tabbar.TabItem>
      </Tabbar>
    </View>
  );
};