@miot-rn/car-component

汽车业务组件库，提供了一系列专为汽车插件开发设计的UI组件。

背景

为了能够提供灵活支持插件开发者的业务组件功能，miot-react-native-plugins 项目提供了一系列丰富的业务UI组件包，其他开发者可以基于此业务UI组件包集合进行插件开发，减少开发工作量。

安装

yarn add @miot-rn/car-component
# 或者
npm install @miot-rn/car-component

组件文档

1. AirConditioningCard (空调卡片)

描述: 提供空调控制功能的卡片组件，支持开关、温度调节、风速控制等功能。

导入方式:

import { AirConditioningCard } from '@miot-rn/car-component';

Props:

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | hvacStatus | boolean | 是 | 空调开关状态 | | hvacDefrosterStatus | boolean | 是 | 除霜开关状态 | | targetTemperature | number | 是 | 目标温度 | | onHvacStatusChange | (value: boolean) => void | 是 | 空调状态变化回调 | | onHvacDefrosterChange | (value: boolean) => void | 是 | 除霜状态变化回调 | | onHvacTemperatureChange | (value: number) => void | 是 | 温度变化回调 | | hvacTitle | string | 否 | 空调标题 | | hvacDefrosterTitle | string | 否 | 除霜标题 | | hvacDefrosterSubtitle | string | 否 | 除霜副标题 | | insideTip | string | 否 | 内部提示文本 | | outsideTip | string | 否 | 外部提示文本 | | temperatureStep | number | 否 | 温度调节步长 | | desgreeUnit | string | 否 | 温度单位 |

使用示例:

import React from 'react';
import { AirConditioningCard } from '@miot-rn/car-component';

const App = () => {
  const [hvacStatus, setHvacStatus] = React.useState(false);
  const [hvacDefrosterStatus, setHvacDefrosterStatus] = React.useState(false);
  const [targetTemperature, setTargetTemperature] = React.useState(22);

  return (
    <AirConditioningCard
      hvacStatus={hvacStatus}
      hvacDefrosterStatus={hvacDefrosterStatus}
      targetTemperature={targetTemperature}
      hvacTitle="空调"
      hvacDefrosterTitle="前除霜"
      hvacDefrosterSubtitle="自动关闭"
      insideTip="车内 22°C"
      outsideTip="车外 28°C"
      temperatureStep={1}
      desgreeUnit="°C"
      onHvacStatusChange={setHvacStatus}
      onHvacDefrosterChange={setHvacDefrosterStatus}
      onHvacTemperatureChange={setTargetTemperature}
    />
  );
};

2. GroupContainer (分组容器)

描述: 用于将多个组件组合在一起的容器组件，支持标题显示和分隔线。

导入方式:

import { GroupContainer } from '@miot-rn/car-component';

Props:

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | title | string | 是 | 分组标题 | | children | React.ReactNode | 是 | 子组件 |

使用示例:

import React from 'react';
import { GroupContainer } from '@miot-rn/car-component';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <GroupContainer title="车辆设置">
      <View>
        <Text>设置项 1</Text>
      </View>
      <View>
        <Text>设置项 2</Text>
      </View>
    </GroupContainer>
  );
};

3. OtherSettingCard (其他设置卡片)

描述: 提供其他设置选项的卡片组件，支持多种设置项的展示和控制。

导入方式:

import { OtherSettingCard } from '@miot-rn/car-component';

Props:

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | usedInCarTip | string | 是 | 车内使用提示文本 | | deviceManageTip | string | 是 | 设备管理提示文本 |

使用示例:

import React from 'react';
import { OtherSettingCard } from '@miot-rn/car-component';

const App = () => {
  return (
    <OtherSettingCard
      usedInCarTip="车内使用"
      deviceManageTip="设备管理"
    />
  );
};

4. SteeringWheelHotCard (方向盘加热卡片)

描述: 提供方向盘加热控制功能的卡片组件，支持多档位调节。

导入方式:

import { SteeringWheelHotCard } from '@miot-rn/car-component';

Props:

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | value | string | 是 | 当前加热档位 | | onChange | (value: string) => void | 是 | 档位变化回调 | | options | Array<HeatingOption> | 否 | 加热选项配置 |

HeatingOption 类型:

interface HeatingOption {
  value: string;
  label: string;
  description: string;
  colorType?: 'primary' | 'secondary';
}

预设档位:

• OFF: 关闭
• Level1: 一档
• Level2: 二档
• Level3: 三档

使用示例:

import React from 'react';
import { SteeringWheelHotCard } from '@miot-rn/car-component';

const App = () => {
  const [heatingLevel, setHeatingLevel] = React.useState('OFF');

  const heatingOptions = [
    { value: 'OFF', label: '关闭', description: 'OFF' },
    { value: 'Level1', label: '一档', description: 'Level1' },
    { value: 'Level2', label: '二档', description: 'Level2' },
    { value: 'Level3', label: '三档', description: 'Level3' }
  ];

  return (
    <SteeringWheelHotCard
      value={heatingLevel}
      onChange={setHeatingLevel}
      options={heatingOptions}
    />
  );
};

组合使用示例

import React from 'react';
import { View, ScrollView } from 'react-native';
import {
  AirConditioningCard,
  GroupContainer,
  OtherSettingCard,
  SteeringWheelHotCard
} from '@miot-rn/car-component';

const CarControlPanel = () => {
  const [hvacStatus, setHvacStatus] = React.useState(false);
  const [hvacDefrosterStatus, setHvacDefrosterStatus] = React.useState(false);
  const [targetTemperature, setTargetTemperature] = React.useState(22);
  const [heatingLevel, setHeatingLevel] = React.useState('OFF');

  return (
    <ScrollView>
      {/* 空调控制组 */}
      <GroupContainer title="空调控制">
        <AirConditioningCard
          hvacStatus={hvacStatus}
          hvacDefrosterStatus={hvacDefrosterStatus}
          targetTemperature={targetTemperature}
          hvacTitle="空调"
          onHvacStatusChange={setHvacStatus}
          onHvacDefrosterChange={setHvacDefrosterStatus}
          onHvacTemperatureChange={setTargetTemperature}
        />
      </GroupContainer>

      {/* 方向盘加热组 */}
      <GroupContainer title="方向盘加热">
        <SteeringWheelHotCard
          value={heatingLevel}
          onChange={setHeatingLevel}
        />
      </GroupContainer>

      {/* 其他设置组 */}
      <GroupContainer title="其他设置">
        <OtherSettingCard
          usedInCarTip="车内使用"
          deviceManageTip="设备管理"
        />
      </GroupContainer>
    </ScrollView>
  );
};

export default CarControlPanel;

主题定制

所有组件都支持通过 ConfigContext 进行主题定制：

import { ConfigContext } from 'miot/ui/hyperOSUI';

const theme = {
  colorToken: {
    mjcard_color_miui_1: '#FF6900',
    mj_color_gray_card_1: '#F5F5F5',
    mj_color_gray_text_4: '#666666',
    mj_color_gray_icon_1: '#999999'
  }
};

// 在组件树中提供主题
<ConfigContext.Provider value={theme}>
  <YourComponents />
</ConfigContext.Provider>

开发指南

本地开发

cd packages/car-component
yarn install
yarn build

类型检查

yarn tsc --noEmit

代码规范

yarn lint
yarn lint-fix

格式化

yarn format

注意事项

1. 最低 SDK 版本: 请确保在使用前检查 package.json 中的 min_sdk_api_level 字段
2. 依赖: 本组件依赖 miot/ui/hyperOSUI 和 miot/ui/icons，请确保这些依赖已正确安装
3. React Native 版本: 本组件适用于 React Native 0.61.0 及以上版本
4. TypeScript: 本组件使用 TypeScript 编写，提供完整的类型支持

贡献指南

1. 新增组件需要在 src 目录下创建对应文件夹
2. 组件需要导出类型定义
3. 更新 src/index.ts 文件以导出新组件
4. 更新本 README 文档
5. 确保通过所有类型检查和代码规范检查

License

MIT