as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持

react-native-device-info

react-native-device-info

react-native-device-info库可让开发者访问适用于Vega的React Native应用(尤其是电视应用)中特定于设备的信息。您可以访问设备名称、应用版本、亮度等信息。

本文解释了为什么您可以使用这个库以及如何使用它。

为什么要使用react-native-device-info?

了解有关设备的更多信息让您能够:

  • 微调应用的功能
  • 提高性能
  • 提供更好的用户体验

进行故障排除和日志记录

了解设备型号、操作系统版本和首次安装时间可以帮助您在调试和维护应用时解决特定于平台的问题、崩溃或错误。

用户个性化

了解首次安装时间、应用版本或其他特定于设备的功能可用于将用户体验个性化。例如,您可以为首次使用的用户显示欢迎消息,或者针对特定电视型号提供不同的内容。

安装

要使用该程序包,请在应用的package.json文件中添加JavaScript库依赖项。

已复制到剪贴板。

"dependencies": {
         ...
         "@amazon-devices/react-native-device-info": "~2.0.0"
    }

导入要使用其方法的组件。

例如:

已复制到剪贴板。

import DeviceInfo from '@amazon-devices/react-native-device-info';

// 或ES6+解构的导入

import { getBaseOs, getBaseOsSync } from '@amazon-devices/react-native-device-info';

const baseOsSync = getBaseOsSync();
const baseOs = await getBaseOs();

如何在Vega中使用react-native-device-info

有三种方法可用:

  • 同步: 在您希望无需等待Promise即可立即获得值时使用该方法。例如,在应用渲染之前运行逻辑或初始化全局配置。
  • 异步: 在您希望避免JavaScript线程阻塞时使用它。该值需要文件I/O工作,或者库仅将该方法公开为异步。
  • 挂钩: 当您在功能组件中时使用它。

同步

为了进行调试和日志记录,同步方法会获取有关您的项目的型号、基本操作系统、设备类型、应用名称和应用程序的信息。

以下是如何同步检索用户个性化组件的一些示例。

示例1

已复制到剪贴板。

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import DeviceInfo from '@amazon-devices/react-native-device-info';

const DeviceDetailsApp = () => {
  const [installTime, setInstallTime] = useState(null);
  const [os, setOs] = useState('');
  const [userAgent, setUa] = useState('');
  const [brightness, setBrightness] = useState(null);

  useEffect(() => {
    DeviceInfo.getFirstInstallTime()
      .then((firstInstallTime) => {
        setInstallTime(firstInstallTime);
      })
      .catch((error) => {
        console.error('获取首次安装时间时出错:', error);
      });

    // 获取基础操作系统
    DeviceInfo.getBaseOs()
      .then((baseOs) => {
        setOs(baseOs);
      });

    // 获取用户代理
    DeviceInfo.getUserAgent()
      .then((userAgent) => {
        setUa(userAgent);
      });

    // 获取屏幕亮度级别
    DeviceInfo.getBrightness()
      .then((brightness) => {
        setBrightness(brightness);
      });
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>设备信息</Text>

      <View style={styles.infoBox}>
        <Text style={styles.label}>首次安装时间 (ms):</Text>
        <Text style={styles.value}>{installTime !== null ? installTime : '正在加载...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Base OS:</Text>
        <Text style={styles.value}>{os || '正在加载...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>User Agent:</Text>
        <Text style={styles.value}>{userAgent || '正在加载...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>屏幕亮度</Text>
        <Text style={styles.value}>{brightness !== null ? brightness : '正在加载...'}</Text>
      </View>
    </ScrollView>
  );
};
export default DeviceDetailsApp;

输出

Vega模拟器输出的屏幕截图,显示设备信息,例如首次安装时间、基本操作系统、用户代理和屏幕亮度。

示例2

为了进行调试和日志记录,同步方法会获取有关您的项目的型号、基本操作系统、设备类型、应用名称和应用程序的信息。您也可以异步使用这些相同的方法

已复制到剪贴板。

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const MODEL = DeviceInfo.getModel();
  const DEVICE_TYPE = DeviceInfo.getDeviceType();
  const APPLICATION_NAME = DeviceInfo.getApplicationName();
  const DEVICE_ID = DeviceInfo.getDeviceId();
  const SYSTEM_VERSION = DeviceInfo.getSystemVersion();
  const APP_VERSION = DeviceInfo.getVersion();

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>设备信息</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>型号</Text>
        <Text style={styles.value}>{型号}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>设备类型</Text>
        <Text style={styles.value}>{DEVICE_TYPE}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>应用名称:</Text>
        <Text style={styles.value}>{APPLICATION_NAME}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>设备ID</Text>
        <Text style={styles.value}>{DEVICE_ID}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>系统版本:</Text>
        <Text style={styles.value}>{SYSTEM_VERSION}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>应用版本</Text>
        <Text style={styles.value}>{APP_VERSION}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

异步

为了进行调试和日志记录,异步方法会获取有关您的项目的型号、基本操作系统、设备类型、应用名称和应用程序的信息。您也可以同步使用这些相同的方法,而非异步使用或等待。

示例

已复制到剪贴板。

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const [deviceInfo, setDeviceInfo] = useState({
    model: '',
    deviceType: '',
    applicationName: '',
    deviceId: '',
    systemVersion: '',
    appVersion: ''
  });

  useEffect(() => {
    const fetchDeviceInfo = async () => {
      const model = await DeviceInfo.getModel();
      const deviceType = await DeviceInfo.getDeviceType();
      const applicationName = await DeviceInfo.getApplicationName();
      const deviceId = await DeviceInfo.getDeviceId();
      const systemVersion = await DeviceInfo.getSystemVersion();
      const appVersion = await DeviceInfo.getVersion();

      setDeviceInfo({
        model,
        deviceType,
        applicationName,
        deviceId,
        systemVersion,
        appVersion
      });
    };

    fetchDeviceInfo();
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>设备信息</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>型号</Text>
        <Text style={styles.value}>{deviceInfo.model}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>设备类型</Text>
        <Text style={styles.value}>{deviceInfo.deviceType}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>应用名称:</Text>
        <Text style={styles.value}>{deviceInfo.applicationName}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>设备ID</Text>
        <Text style={styles.value}>{deviceInfo.deviceId}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>系统版本:</Text>
        <Text style={styles.value}>{deviceInfo.systemVersion}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>应用版本</Text>
        <Text style={styles.value}>{deviceInfo.appVersion}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

输出

Vega模拟器输出的屏幕截图,显示设备信息,例如型号、设备类型、应用程序名称、设备ID、系统版本和应用版本。

挂钩

  1. useBrightness()
  2. useManufacturer()
  3. useDeviceName()
  4. useFirstInstallTime()

示例

以下是使用useDeviceName() 的示例。

已复制到剪贴板。

import { useDeviceName } from '@amzn/react-native-device-info';

const { loading, result } = useDeviceName();

<Text>{loading ? '正在加载...' : result}</Text>;

重要须知: 目前不支持以下属性,如果使用,则返回空白响应:

  • 位置信息
  • 内存

API参考

Vega仅支持本文档中提到的API。来自react-native-device-info APIs(仅提供英文版)的许多API都是特定平台专用的。如果没有为平台实现,则字符串的“默认”返回值为unknown,数字的返回值为-1,布尔值的返回值为false。数组和对象为空(分别为 []{})。

大多数API返回Promise,但也有相应的API,其末尾是同步运行的Sync。例如,您可能更希望在应用启动期间调用getBaseOsSync(),以避免在应用启动的第一部分期间进行异步调用。

注意:​ 示例中显示的值仅供参考,不代表实际输出。

getBaseOs()

产品所依据的基本操作系统内部版本号。

示例

已复制到剪贴板。

DeviceInfo.getBaseOs().then((baseOs) => {
  // "Kepler"
});

getFirstInstallTime()

获取应用的首次安装时间,以毫秒为单位。

示例

已复制到剪贴板。

DeviceInfo.getFirstInstallTime().then((firstInstallTime) => {
  // 1517681764528
});

getInstallerPackageName()

底层来源控制用于表示此版本的内部值。

示例

已复制到剪贴板。

DeviceInfo.getInstallerPackageName().then((installerPackageName) => {
  // "com.amazon.venezia"
});

getManufacturer()

获取设备制造商。

示例

已复制到剪贴板。

DeviceInfo.getManufacturer().then((manufacturer) => {
   // “亚马逊”
});

getLastUpdateTime()

获取应用的上次更新时间,以毫秒为单位。

示例

已复制到剪贴板。

DeviceInfo.getLastUpdateTime().then((lastUpdateTime) => {
  //  1517681764992
});

getUserAgent()

获取设备用户代理。

示例

已复制到剪贴板。

DeviceInfo.getUserAgent().then((userAgent) => {
  // "Kepler/1.1 (Linux; AFTCA002)"
});

已知问题

getuserAgent可能不会在Vega虚拟设备中返回值,但会在Fire TV Stick上返回一个值。


getApplicationName()

获取应用名称。

示例

已复制到剪贴板。

let appName = DeviceInfo.getApplicationName();
// "AwesomeApp"

getVersion()

获取应用版本。

示例

已复制到剪贴板。

let version = DeviceInfo.getVersion();
//  "1.0.0"

getModel()

获取设备型号。

示例

已复制到剪贴板。

let model = DeviceInfo.getModel();
// AFTCA001

getSystemName()

获取设备操作系统名称。

示例

已复制到剪贴板。

let systemName = DeviceInfo.getSystemName();
// "Kepler"

getSystemVersion()

获取设备操作系统版本。

示例

已复制到剪贴板。

let systemVersion = DeviceInfo.getSystemVersion();
// "1.1"

getBundleId()

获取应用Bundle标识符。

示例

已复制到剪贴板。

let bundleId = DeviceInfo.getBundleId();
// "com.example.awesomeApp"

getDeviceType()

以字符串形式返回设备的类型。

示例

已复制到剪贴板。

let type = DeviceInfo.getDeviceType();
// 'TV'
// 未知

getDeviceId()

获取设备ID。

示例

已复制到剪贴板。

let deviceId = DeviceInfo.getDeviceId();
// AFTCA001

支持的版本

程序包名称 亚马逊NPM库版本 Vega OS内部版本号 Vega SDK版本 发布说明
@amazon-devices/react-native-device-info 2.1.0+10.11.0 OS 1.1 (201010438050) 0.20  

支持的第三方库和服务


Last updated: 2025年12月22日