react-native-device-info

react-native-device-info库可让开发者访问适用于Vega的React Native应用（尤其是电视应用）中特定于设备的信息。您可以访问设备名称、应用版本、亮度等信息。本文解释了为什么您可以使用这个库以及如何使用它。

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

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();

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

现在您已经导入了库，可以从中导入方法。有三种方法可用：

同步
异步
挂钩

同步

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

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amzn/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;

以下方法可以在没有async/await的情况下使用：

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amzn/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;

输出：

屏幕截图显示了模拟器的设备信息面板，该面板显示了设备详细信息，包括首次安装时间(ms)、基本操作系统、用户代理和屏幕亮度。

异步

以下是已配置的用户个性化设置的示例。

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import DeviceInfo from '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;

输出：您可以查看用户个性化设置的首次安装时间、基本操作系统、用户代理和屏幕亮度结果。模拟器和设备的结果相似，只是用户代理的结果有所不同。

模拟器

TV

挂钩

useBrightness()
useManufacturer()
useDeviceName()
useFirstInstallTime()

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？

进行故障排除和日志记录

用户个性化

安装

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

同步

异步

模拟器

TV

挂钩

API参考

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

已知问题

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

支持的版本

相关主题

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

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

​用户个性化

​安装

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

​同步

​异步

​模拟器

​TV

​挂钩

​API参考

​getBaseOs()

​getFirstInstallTime()

​getInstallerPackageName()

​getManufacturer()

​getLastUpdateTime()

​getUserAgent()

​已知问题

​getApplicationName()

​getVersion()

​getModel()

​getSystemName()

​getSystemVersion()

​getBundleId()

​getDeviceType()

​getDeviceId()

​支持的版本

​相关主题

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

进行故障排除和日志记录

用户个性化

安装

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

同步

异步

模拟器

TV

挂钩

API参考

getBaseOs()

getFirstInstallTime()

getInstallerPackageName()

getManufacturer()

getLastUpdateTime()

getUserAgent()

已知问题

getApplicationName()

getVersion()

getModel()

getSystemName()

getSystemVersion()

getBundleId()

getDeviceType()

getDeviceId()

支持的版本

相关主题