机型选择iphone12/13的时候Tabbar组件会失效，在其他机型都能生效。在真机调试的时候iphone13实际可以显示Tabbar组件
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>
);
};