目录结构

外部调用功能时方法传递流程: manager 目录 => SDK 目录 => native 目录

native 目录

提供原生能力，仅对外暴露原生 module 提供的能力，主要功能为退出原生容器以及 bundle 与主程序通信

sdk 目录

对 native 目录的原生能力的功能封装

• action 目录 提供命令主程序行为调用 比如控制设备
• device 目录 提供设备相关功能 比如设备信息获取
• user 目录 提供用户相关功能 比如设备信息获取
• interactive 目录 提供交互类功能 比如原生页面调转
• event 目录 提供事件监听功能 比如监听设备状态变化
• imp 目录 提供 ts 类型定义

manager 目录

整个 CKSDK 对外暴露的所有功能，包括事件通信监听 网络状态监听等

event 目录

用于事件监听和事件触发的名称定义

func 目录

暂用于功能 id 的定义和使用

用法

初始化

调用以下函数初始化

Package.launch('uiid221_component', App, {
  locales,
  getImageSource,
});

locales 是语言标签为 key，翻译 map 为值的 map

// 插件自己的翻译 json
import en from './locale-en.json';
import zh from './locale-zh.json';

export default {
  en,
  zh,
};

目前只支持中文、英文。SDK 内部使用的翻译 json 路经为：

• 英文: CKEweLinkSDK/manager/i18n/locale/locale-en.json
• 中文: CKEweLinkSDK/manager/i18n/locale/locale-zh.json

getImageSource 文档见 package/readme.md

API

设备 API

device.setDeviceTags

设置设备标签

参数

• tags: Record<string, T> 要设置的标签 key-value 对象

useDeviceTags

获取设备 tags 并监听 tags 变更

参数

• tagKeys: 获取并监听变更的 tag 数组，不传表示获取所有 tags/监听所有 tags 字段变更，传空数组表示任意 tag 字段都不获取/监听变更

Slider

BaseSlider

提供手势处理，会在 onAnimatedValue 回调 SliderAnimatedValues

注意 width 必传

Props

{
  value: number;
  width: number;
  type?: SliderType;
  style?: ViewStyle;
  onValueChange: (value: number) => void;
  onAnimatedValue: (animatedValues: SliderAnimatedValues) => void;
}

SliderAnimatedValues

export interface SliderAnimatedValues {
  animatedX: Animated.Value;
  animatedValue: Animated.AnimatedDivision;
  animatedOffset: Animated.AnimatedInterpolation;
}

Slider

Props

与 BaseSlider props 相同

{
  value: number;
  width: number;
  type?: SliderType;
  style?: ViewStyle;
  onValueChange: (value: number) => void;
  onAnimatedValue: (animatedValues: SliderAnimatedValues) => void;
}

示例

<Slider
  value={0.3}
  width={windowWidth - 32}
  style={styles.slider}
  onSlidingComplete={(value) => {
    console.log('Slider value:' + value);
  }}
/>

ThinSlider

滑杆为细样式的 Slider，NOT READY!

Picker

ColorPicker

色盘选择器，NOT READY!

ColorPickerEx

色盘选择器，临时方案

CCTPicker

色温选择器，NOT READY!

CCTPickerEx

色温选择器，临时方案

Dialog

参数

export type DialogConfig = {
  dialogKey: string;
  type?: DialogType;
  // 点击遮罩区域及安卓硬返回键是否可以关闭 Modal
  isClosable?: boolean;
  // AlertDialogContent
  alertType?: AlertType;
  // MessageDialogContent, AlertDialogContent
  message?: ReactNode;
  // InputDialogContent
  title?: ReactNode;
  defaultValue?: string;
  tips?: ReactNode;
  style?: StyleProp<ViewStyle>;
  inputStyle?: StyleProp<TextStyle>;
  inputProps?: TextInputProps;
  onVerify?: (value: ValueType) => boolean;
  // 按钮
  buttons?: DiglogButton[];
  // 确定、保存等按钮
  positiveButtonText?: string;
  positiveButtonStyle?: StyleProp<ViewStyle>;
  positiveButtonTextStyle?: StyleProp<TextStyle>;
  onPositiveAction?(info: DialogCallbackInfo): void;
  // 取消等按钮
  negativeButtonText?: string;
  negativeButtonStyle?: StyleProp<ViewStyle>;
  negativeButtonTextStyle?: StyleProp<TextStyle>;
  onNegativeAction?(info: DialogCallbackInfo): void;
};

示例

输入对话框

Dialog.show({
  type: DialogType.INPUT,
  title: '最小电压（V)',
  tips: '*支持设置范围为: 100 ~ 250',
  defaultValue: '220',
  inputProps: {
    keyboardType: 'numeric',
  },
  negativeButtonText: '取消',
  positiveButtonText: '确认',
  onPositiveAction: (info: DialogCallbackInfo) => {
    console.log('onPositiveAction value', info.value);
  },
  onVerify: (text: string) => Number(text) >= 100 && Number(text) <= 250,
});

Header

页面头部组件，使用 ComposeHeader，不直接使用 Header

需在插件 AppContainer ref 处调用 NavigationService.setTopLevelNavigator 先

<AppContainer
  ref={(navigatorRef) => {
    NavigationService.setTopLevelNavigator(navigatorRef);
  }}
/>

参数

interface HeaderProps {
  title: ReactNode;
  titleAlign: 'left' | 'center';
  hideBack?: boolean;
  onBackPress?: () => void;
  leftButtons?: HeaderButtonProps[];
  rightButtons?: HeaderButtonProps[];
  navigation: NavigationScreenProp<NavigationRoute>;
}

示例

const rightButtons: HeaderButtonProps[] = [
  {
    preset: 'SETTINGS',
    onPress: () => {},
  },
];
<ComposeHeader
  title={props.screenProps.name}
  titleAlign="left"
  rightButtons={rightButtons}
/>;

Settings 设置

配置

设置页面的「设备设置」列表有多少选项由配置文件 funcsForSetting 决定，但是每个字符串代表的选项的展示形式由插件跳转到 DeviceSettingsScreen 时传的 deviceSettings 决定。

{
  "funcsForSetting": ["PowerOnState"]
}

funcsForSetting 支持的 SDK 内置的选项如下：

• 'DeviceName' 设备名称
• 'FirmwareVersion' 当前版本
• 'FirmwareName' 固件名称
• 'MacSetting' MAC 地址
• 'ShowAs' 显示为
• 'AssignLocation' 位置管理
• 'ShareDevice' 分享设备
• 'GroupManage' 创建群组
• 'ManageDeviceGroup' 创建群组
• 'DeviceID' 设备 ID
• 'RemoteControl' 轻智能遥控器
• 'PowerOnState' 通电反应
• 'Pulse' 点动
• 'FadeOnOff' 开关渐变
• 'OperationNotification' 操作通知
• 'MiniProgram' 小程序控制
• 'LanControl' 局域网控制
• 'SwitchWIFI' WiFi 设置
• 'IndicatorSettingItem' 网络指示灯
• 'OperationRecord' 操作记录
• 'TemperatureUnit' 温度单位
• 'TemperatureUnitByTags' 温度单位（设置在 tags 里）
• 'AlarmNotification' 报警通知

自定义设备设置

若默认的设置项的行为不符合产品需求，可在跳转至 DeviceSettingsScreen 传路由参数来自定义。

可以使用公用样式的设置项（比如带箭头或带开关的设置项），建议使用通用组件，不要设置项自己写个组件。

DeviceSettingsScreen 路由参数

| 选项 | 类型 | 是否必选 | 默认值 | 描述 | 说明 | | :-------: | :--------------: | :----: | :---: | :--- | :--- | | basicInfo | SettingConfig[] | 否 | ['DeviceName', 'FirmwareVersion'] | 基础信息 | | quickSettings | SettingConfig[] | 否 | ['AssignLocation', 'ShareDevice', 'GroupManage'] | 快捷设置 | | deviceSettings | SettingConfig[] | 否 | | 设备设置 | 用来自定义配置文件 funcsForSetting 配置的设置项 | | deviceInfo | SettingConfig[] | 否 | ['DeviceID', 'MacSetting', 'FirmwareName'] | 设备信息 | |

SettingConfig

如果不需要自定义设置项的行为，SettingConfig 为 string，否则 SettingConfig 为 object。

SettingConfig 通用属性

| 选项 | 类型 | 是否必选 | 描述 | 说明 | | :-------: | :--------------: | :----: | :--- | :--- | | key | string | 是 | 匹配 funcsForSetting 的 key | 如：'PowerOnState' | name | string | 否 | 设置项的名称 | | screen | string | 否 | 跳转的页面 | 'PowerOnStateScreen' 单通道通电反应页面 'PowerOnStateLaunchScreen' 多通道通电反应落地页 | | supportFunc | string | 否 | 设备上报的用来表示是否支持这个设置项的字段 | 如果设备长链接状态 params[supportFunc] 为 false，则不显示这个设置项 | | componentType | 'switch' | 否 | 组件类型 | 目前只支持开关样式 | | component | ReactElement | 否 | 组件实例 | 用来给插件完全自定义设置项组件 | | onPress | () => void | 否 | 点击组件回调 | |

SettingConfig 专有属性

| 选项 | 类型 | 支持的 key | 描述 | 说明 | | :-------: | :-------------: | :-------: | :--- | :--- | | options | Array<object> | 'PowerOnState' | 多通道通电反应落地页显示的通道列表选项 | screen 为 PowerOnStateLaunchScreen 时必选 |

示例

示例：UIID 221 五路六档风扇灯通电反应

props.navigation.navigate('DeviceSettingsScreen', {
  deviceid: props.deviceid,
  deviceSettings: [
    {
      key: 'PowerOnState',
      screen: 'PowerOnStateLaunchScreen',
      options: [
        {
          name: '风扇',
          controlKey: 'fStartup',
        },
        {
          name: '灯',
          controlKey: 'lStartup',
        },
      ],
    },
  ],
});

示例：设备名称自定义跳转多通道名称编辑页面

props.navigation.navigate('DeviceSettingsScreen', {
  basicInfo: [
    {
      key: 'DeviceName',
      screen: 'DeviceFunctionNameLaunchScreen',
      options: ['switch_00', 'switch_01'],
    },
  ],
} as DeviceSettingsScreenParams);

示例：设备名称自定义跳转多通道名称编辑页面通过tags ck_channel_name

props.navigation.navigate('DeviceSettingsScreen', {
  basicInfo: [
    key: 'DeviceName',
    screen: 'DeviceFunctionNameLaunchScreen',
    showCkChannelName: true,
  ],
} as DeviceSettingsScreenParams);