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工作，或者库仅将该方法公开为异步。
挂钩：当您在功能组件中时使用它。

同步

为了进行调试和日志记录，同步方法会获取有关您的项目的型号、基本操作系统、设备类型、应用名称和应用程序的信息。以下是如何同步检索用户个性化组件的一些示例。

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 : 'Loading...'}</Text>
      </View>

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

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

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

输出：

示例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}>{MODEL}</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;

输出：

挂钩

useBrightness()
useManufacturer()
useDeviceName()
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

Vega 库和服务

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

进行故障排除和日志记录

用户个性化

安装

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

同步

示例2

异步

示例

挂钩

API参考

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

已知问题

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

支持的版本

相关主题

​为什么要使用react-native-device-info？

​进行故障排除和日志记录

​用户个性化

​安装

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

​同步

​示例2

​异步

​示例

​挂钩

​API参考

​getBaseOs()

​getFirstInstallTime()

​getInstallerPackageName()

​getManufacturer()

​getLastUpdateTime()

​getUserAgent()

​已知问题

​getApplicationName()

​getVersion()

​getModel()

​getSystemName()

​getSystemVersion()

​getBundleId()

​getDeviceType()

​getDeviceId()

​支持的版本

​相关主题

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

进行故障排除和日志记录

用户个性化

安装

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

同步

示例2

异步

示例

挂钩

API参考

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

已知问题

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

支持的版本

相关主题