---
title: 基础
summary: "提供 RN 面板基础 API（原生方法、设备方法、事件等）迁移到小程序的详细对照指南。"
tags: [RN迁移基础API, 原生方法替代, Native方法迁移]
questions:
  - RN 的 TYSdk.native 原生方法在面板小程序中如何替代？
  - 面板小程序中如何跳转到定时页面和设备详情页？
  - RN 的蓝牙相关原生方法迁移到小程序后怎么使用？
  - TYSdk.mobile 的移动方法在小程序中有哪些对应 API？
  - 面板小程序中如何下发 DP 点状态？
  - 如何使用 useProps 和 useDevice 替代 RN 的设备方法？
  - RN 的 deviceDataChange 事件在小程序中如何替代？
  - RN 的 apiRequest 请求接口在小程序中如何迁移？
  - 面板小程序中如何获取设备信息和 dpCode？
  - RN 的 bluetoothChange 和 networkStateChange 事件在小程序中对应什么？
---

# 基础

## 原生方法

### 跳转面板定时页

**之前：**

```js
TYSdk.native.gotoDpAlarm(params);
```

**现在：**

详见 [openTimerPage](/cn/miniapp/develop/ray/api/timer/base/openTimerPage#opentimerpage)

```tsx
import { openTimerPage } from '@ray-js/ray';

openTimerPage({
  deviceId: device_id,
  category: 'category',
  data:[
    {
      dpName: '开关1',
      dpId: '1',
      rangeKeys:["open","close"],
      rangeValues:["开","关"]
    }
  ],
  success: (res) => {
    console.log('success',res);
  }
  })
```

### 跳转设备详情页

**之前：**

```js
TYSdk.native.showDeviceMenu()
```

**现在：**

详见 [openDeviceDetailPage](/cn/miniapp/develop/ray/api/functional/openDeviceDetailPage#opendevicedetailpage)

### 获取设备蓝牙信息

**之前：**

```js
TYSdk.native.getBTInfo('YOUR_DEVICE_ID')
  .then(data => console.log('data: ', data))
  .catch(err => console.log('err: ', err));
```

**现在：**

详见 [getBTDeviceInfo](/cn/miniapp/develop/ray/api/device-connect/BT/getBTDeviceInfo#getbtdeviceinfo)

### 打开蓝牙配对弹窗（安卓）

**之前：**

```js
TYSdk.native.createBTbond('YOUR_DEVICE_MAC')
  .then(data => console.log('data: ', data))
  .catch(err => console.log('err: ', err));
```

**现在：**

详见 [connectBTBond](/cn/miniapp/develop/ray/api/device-connect/BT/connectBTBond)

### 移除蓝牙连接（安卓）

**之前：**

```js
TYSdk.native.removeBTbond()
```

**现在：**

详见 [disconnectBTBond](/cn/miniapp/develop/ray/api/device-connect/BT/disconnectBTBond#disconnectbtbond)

### 打开系统设置页面（iOS）

**之前：**

```js
TYSdk.native.jumpToSettingPage();
```

**现在：**

详见 [openSystemSettingPage](/cn/miniapp/develop/ray/api/base/system/openSystemSettingPage#opensystemsettingpage)

## 移动方法

### 返回 App 列表

**之前：**

```js
TYSdk.mobile.back();
```

**现在：**

详见 [exitMiniProgram](/cn/miniapp/develop/ray/api/navigate/exitMiniProgram#exitminiprogram)

### 显示底部对话列表【废弃】

已废弃，建议使用前端 UI 组件，如 SmartUI 的 [ActionSheet](https://developer.tuya.com/material/smartui?comId=action-sheet) 替代实现

### 禁用手势全屏返回【废弃】

已废弃

### 开启手势全屏返回【废弃】

已废弃

### 获取客户端信息

**之前：**

```js
TYSdk.mobile.getMobileInfo();
```

**现在：**

可配合 [getSystemInfo](/cn/miniapp/develop/ray/api/base/system/getSystemInfo#getsysteminfo) 及 [getMobileDeviceInfo](/cn/miniapp/develop/ray/api/base/system/getMobileDeviceInfo#getmobiledeviceinfo) 获取客户端信息

### 获取网络状态

**之前：**

```js
TYSdk.mobile.getNetworkState();
```

**现在：**

详见 [getNetworkType](/cn/miniapp/develop/ray/api/device/network/getNetworkType#getnetworktype)，如需获取设备某个通道是否在线，可使用 [getDeviceOnlineType](/cn/miniapp/develop/ray/api/device-info/info/getDeviceOnlineType#getdeviceonlinetype)

### 显示 loading UI 框

**之前：**

```js
TYSdk.mobile.showLoading();
```

**现在：**

详见 [showLoading](/cn/miniapp/develop/ray/api/ui/interaction/showLoading#showloading)

### 隐藏 loading UI 框

**之前：**

```js
TYSdk.mobile.hideLoading();
```

**现在：**

详见 [hideLoading](/cn/miniapp/develop/ray/api/ui/interaction/hideLoading#hideLoading)

### 检测时间制

**之前：**

```js
TYSdk.mobile.is24Hour()
 .then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**现在：**

详见 [getSystemInfo](/cn/miniapp/develop/ray/api/base/system/getSystemInfo#getsysteminfo) 中的 `is24Hour` 返回值

### 跳转二级页面

### 跳转至已存在场景

**之前：**

```js
TYSdk.mobile.jumpTo('tuyasmart://xxxUrl');
```

**现在：**

<Callout type="warning" emoji="⚠️">
  原先 RN 中的部分场景已不再建议使用，若存在面板小程序中无法找到对应的短链，请前往 [论坛社区](https://www.tuyaos.com/viewforum.php?f=10) 描述您的具体需求和场景，我们安排评估支持。
</Callout>

- [openCreateTapToRunScene](/cn/miniapp/develop/ray/api/scenes/functional/openCreateTapToRunScene)
- [openShareDevice](/cn/miniapp/develop/ray/api/functional/openShareDevice)
- ...

### 编辑对话框【废弃】

已废弃，建议使用前端 UI 组件，如 SmartUI 的 [Dialog 弹出框](https://developer.tuya.com/material/smartui?comId=dialog#%E6%B6%88%E6%81%AF%E7%A1%AE%E8%AE%A4) 替代实现

### 轻量级对话【废弃】

已废弃，建议使用前端 UI 组件，如 SmartUI 的 [Dialog 弹出框](https://developer.tuya.com/material/smartui?comId=dialog#%E6%B6%88%E6%81%AF%E7%A1%AE%E8%AE%A4) 替代实现

### 简易确认对话框

**之前：**

```js
TYSdk.mobile.simpleConfirmDialog(title, msg, onConfirmed, onCanceled);
```

**现在：**

详见 [showModal](/cn/miniapp/develop/ray/api/ui/interaction/showModal#showmodal)

### 简易提示框

**之前：**

```js
TYSdk.mobile.simpleTipDialog(msg, onConfirmed);
```

**现在：**

详见 [showModal](/cn/miniapp/develop/ray/api/ui/interaction/showModal#showmodal)，如将 `showCancel` 入参设置为 `false`

{/* ### 检测 App 版本 */}

## 设备方法

### 下发 dp 点状态 / 下发局域网内 dp 点状态

**之前：**

```js
TYSdk.device.putDeviceData({ switch_1: true });

// or

TYSdk.device.putLocalDpData({ switch_1: true });
```

**现在：**

```js
import { publishDps } from '@ray-js/ray';
 
await publishDps({ switch_1: true });
```

但我们更推荐使用智能设备模型中配套的 `useActions` Hooks 进行 dp 点下发，详见 [useActions](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useActions)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps, useActions } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switch_1 = useProps(props => props.switch_1);
  const actions = useActions();
  return (
    <View
      style={{ flex: 1 }}
      onClick={() => {
        actions.switch_1.toggle();
      }}
    >
      <View>socket.switch_1: {switch_1}</View>
    </View>
  );
}
```

### 获取设备状态信息

**之前：**

```js
TYSdk.device.getDeviceState()
.then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**现在：**

详见 [useProps](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useProps)

<Callout type="warning" emoji="⚠️">
  getDeviceState 只会获取当前的设备状态信息，而 useProps 会在设备状态变更时自动驱动刷新<br/>
  因此除非当前页面或组件需要监听所有功能点的变化，否则请勿使用该方式，会导致当前页面或组件出现性能问题，频繁进行无效的重复渲染。
</Callout>

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpState1 = useProps();
  const dpState2 = useProps(props => props);
  return (
    <View style={{ flex: 1 }}>
      <View>dpState1: {JSON.stringify(dpState1)}</View>
      <View>dpState2: {JSON.stringify(dpState2)}</View>
    </View>
  );
}
```

### 检查 dp 是否存在

**之前：**

```js
TYSdk.device.checkDpExist(idOrCode);
// 若输入 dpCode 则返回 dpId
const data = TYSdk.device.checkDpExist('switch_1');
// 若输入 dpId 则返回 dpCode
const data = TYSdk.device.checkDpExist('1');
console.log('data: ', data);
```

**现在：**

详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const isSwitchExist1 = useDevice(device => typeof device.devInfo.codeIds.switch_1 !== 'undefined');
  const isSwitchExist2 = useDevice(device => typeof device.devInfo.idCodes[1] !== 'undefined');
  return (
    <View style={{ flex: 1 }}>
      <View>isSwitchExist1: {isSwitchExist1}</View>
      <View>isSwitchExist2: {isSwitchExist2}</View>
    </View>
  );
}
```

### 获取设备信息

**之前：**

```js
TYSdk.device.getDeviceInfo()
  .then((data: DevInfo) => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**现在：**

方式一：通过 getDeviceInfo 获取，详见 [getDeviceInfo](/cn/miniapp/develop/ray/api/device-info/info/getDeviceInfo#getdeviceinfo)

```ts
import { device } from '@ray-js/ray';
const { getDeviceInfo } = device;

getDeviceInfo({
  deviceId: 'vdevxxxxx',
})
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
```

方式二：通过 SDM 的 Hooks，详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const devInfo = useDevice(device => device.devInfo);
  return (
    <View style={{ flex: 1 }}>
      <View>devInfo: {devInfo}</View>
    </View>
  );
}
```

### 获取 dpCode

**之前：**

```js
TYSdk.device.getDpCodeById('22');
```

**现在：**

详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switchCode = useDevice(device => device.devInfo.idCodes[22]);
  return (
    <View style={{ flex: 1 }}>
      <View>switchCode: {switchCode}</View>
    </View>
  );
}
```

### 获取 dpCodes

**之前：**

```js
TYSdk.device.getDpCodes();
```

**现在：**

详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpCodes = useDevice(device => device.devInfo.idCodes);
  return (
    <View style={{ flex: 1 }}>
      <View>dpCodes: {dpCodes}</View>
    </View>
  );
}
```

### 获取 dp 点状态

**之前：**

```js
TYSdk.device.getDpDataFromDevice(idOrCode)
 .then(data => {
    console.log('data :>> ', data);
  })
  .catch(error => {
    console.log('error :>> ', error);
  });
```

**现在：**

详见 [queryDps](/cn/miniapp/develop/ray/api/device-control/dp/queryDps#querydps)

### 获取 dpId

**之前：**

```js
TYSdk.device.getDpIdByCode('bright_value');
```

**现在：**

详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const brightId = useDevice(device => device.devInfo.codeIds.bright_value);
  return (
    <View style={{ flex: 1 }}>
      <View>brightId: {brightId}</View>
    </View>
  );
}
```

### 获取 schema 信息

**之前：**

```js
TYSdk.device.getDpSchema(dpCode);
// 获取开关 switch_1 的 Schema 信息
const data = TYSdk.device.getDpSchema('switch_1');
console.log('data: ', data);
```

**现在：**

详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpSchema = useDevice((device) => device.dpSchema);
  return (
    <View style={{ flex: 1 }}>
      <View>device dpSchema: {JSON.stringify(dpSchema)}</View>
    </View>
  );
}
```

### 获取 dp 的 value 值

**之前：**

```js
TYSdk.device.getState(idOrCode);
```

**现在：**

详见 [useProps](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useProps)

<Callout type="warning" emoji="⚠️">
  getState 只会获取当前的设备状态，而 useProps 会在指定的设备功能点状态变更时自动驱动视图刷新
</Callout>

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const power = useProps((props) => props[idOrCode]);
  return (
    <View style={{ flex: 1 }}>
      <View>power: {power}</View>
    </View>
  );
}
```

### 是否是蓝牙设备 / 设备共享 / SigMesh 设备 / 无线 Wi-Fi 设备

**之前：**

```js
TYSdk.device.isBleDevice();
TYSdk.device.isShareDevice();
TYSdk.device.isSigMeshDevice();
TYSdk.device.isWifiDevice();
```

**现在：**

详见 [useSupport](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useSupport)

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';
import { useSupport, useDevice } from '@ray-js/panel-sdk';
 
function PageSdmSupport() {
  const support = useSupport();
  const isShareDevice = useDevice(device => device.devInfo.isShare);
  return (
    <View>
      <Text>{support.isBleDevice() ? 'BLE Device' : 'Other Device'}</Text>
      <Text>{isShareDevice ? 'Share Device' : 'Other Device'}</Text>
      <Text>{support.isSigMeshDevice() ? 'SigMesh Device' : 'Other Device'}</Text>
      <Text>{support.isWifiDevice() ? 'Wi-Fi Device' : 'Other Device'}</Text>
    </View>
  );
}
```

## 请求接口

**之前：**

```js
TYSdk.apiRequest(a, postData, version)
  .then(data =>
    console.log('data',data);
  )
  .catch(error =>
    console.log('error',error);
  );
```

**现在：**

- 请求涂鸦内部服务的通用 API 已被废弃，如需调用特定的开放接口，可参考 [开放接口](#开放接口) 部分
- 但我们开放了 [request](/cn/miniapp/develop/ray/api/network/request/request) API，能够支持调用第三方服务接口

## 事件方法

### deviceDataChange

**之前：**

```js
const handleDeviceDataChange = (data) => {
  // 设备状态变更通知，payload 为更新的 DP 状态
  if (data.type === 'dpData') {
    console.log('dpData event', data.payload);
  }
  // 设备信息变更通知，payload 为 devInfo
  if (data.type === 'devInfo') {
    console.log('devInfo event', data.payload);
  }
  // deviceOnline 设备是否在线通知，payload 为 boolean
  if (data.type === 'deviceOnline') {
    console.log('deviceOnline event', data.payload);
  }
};

TYSdk.event.on('deviceDataChange', handleDeviceDataChange);
TYSdk.event.off('deviceDataChange', handleDeviceDataChange);
```

**现在：**

- 设备状态变更通知：即 data.type === 'dpData'，参考下述 API
  - [onDpDataChange](/cn/miniapp/develop/ray/api/device-control/dp/onDpDataChange#ondpdatachange)
  - [offDpDataChange](/cn/miniapp/develop/ray/api/device-control/dp/offDpDataChange)
- 设备信息变更通知：即 data.type === 'devInfo'，参考下述 API
  - [onDeviceInfoUpdated](/cn/miniapp/develop/ray/api/device-info/info/onDeviceInfoUpdated)
  - [offDeviceInfoUpdated](/cn/miniapp/develop/ray/api/device-info/info/offDeviceInfoUpdated)
- 设备是否在线通知：即 data.type === 'deviceOnline'，参考下述 API
  - [onDeviceOnlineStatusUpdate](/cn/miniapp/develop/ray/api/device-info/info/onDeviceOnlineStatusUpdate)
  - [offDeviceOnlineStatusUpdate](/cn/miniapp/develop/ray/api/device-info/info/offDeviceOnlineStatusUpdate)

### networkStateChange

**之前：**

```js
TYSdk.event.on('networkStateChange', yourHandler);
TYSdk.event.off('networkStateChange', yourHandler);
```

**现在：**

- [getNetworkType](/cn/miniapp/develop/ray/api/device/network/getNetworkType)
- [onNetworkStatusChange](/cn/miniapp/develop/ray/api/device/network/onNetworkStatusChange#onnetworkstatuschange)
- [offNetworkStatusChange](/cn/miniapp/develop/ray/api/device/network/offNetworkStatusChange)

### linkageTimeUpdate

**之前：**

```js
TYSdk.event.on('linkageTimeUpdate', yourHandler);
TYSdk.event.off('linkageTimeUpdate', yourHandler);
```

**现在：**

- [onTimerUpdate](/cn/miniapp/develop/ray/api/timer/base/onTimerUpdate)
- [offTimerUpdate](/cn/miniapp/develop/ray/api/timer/base/offTimerUpdate)

### deviceLocalStateChange

**之前：**

```js
TYSdk.event.on('deviceLocalStateChange', yourHandler);
TYSdk.event.off('deviceLocalStateChange', yourHandler);
```

**现在：**

- [onDeviceOnlineStatusUpdate](/cn/miniapp/develop/ray/api/device-info/info/onDeviceOnlineStatusUpdate)
- [offDeviceOnlineStatusUpdate](/cn/miniapp/develop/ray/api/device-info/info/offDeviceOnlineStatusUpdate)

### bluetoothChange

**之前：**

```js
TYSdk.event.on('bluetoothChange', yourHandler);
TYSdk.event.off('bluetoothChange', yourHandler);
```

**现在：**

- [onBluetoothAdapterStateChange](/cn/miniapp/develop/ray/api/device/bluetooth/onBluetoothAdapterStateChange#onbluetoothadapterstatechange)
- [offBluetoothAdapterStateChange](/cn/miniapp/develop/ray/api/device/bluetooth/offBluetoothAdapterStateChange)

### NAVIGATOR_ON_WILL_FOCUS / NAVIGATOR_ON_DID_FOCUS

**之前：**

```js
TYSdk.event.on('NAVIGATOR_ON_WILL_FOCUS', yourHandler);
TYSdk.event.off('NAVIGATOR_ON_WILL_FOCUS', yourHandler);
```

**现在：**

详见 [usePageEvent](/cn/miniapp/develop/ray/framework/api#usepageevent) 中的 `onShow` 和 `onLoad` 事件。

## 获取设备信息

**之前：**

```js
console.log('TYSdk.devInfo: ', TYSdk.devInfo);
```

**现在：**

<Callout type="info" emoji="ℹ️">
  面板小程序相比 RN 面板预留了设备多控的能力，比如我们可以在小程序中监听多个设备的状态或控制多个设备，因此设备信息的获取方式会有所区别，不再支持直接从常量里获取。
</Callout>

方式一：通过 getDeviceInfo 获取，详见 [getDeviceInfo](/cn/miniapp/develop/ray/api/device-info/info/getDeviceInfo#getdeviceinfo)

```ts
import { device } from '@ray-js/ray';
const { getDeviceInfo } = device;

getDeviceInfo({
  deviceId: 'vdevxxxxx',
})
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
```

方式二：通过 SDM 的 Hooks，详见 [useDevice](/cn/miniapp/solution-panel/ability/common/sdm/hooks/useDevice)

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const devInfo = useDevice(device => device.devInfo);
  return (
    <View style={{ flex: 1 }}>
      <View>devInfo: {devInfo}</View>
    </View>
  );
}
```