react-native-device-info

react-native-device-info — это библиотека для React Native, которая предоставляет информацию о текущем устройстве. Она позволяет получать данные о системе, приложении и устройстве, такие как модель устройства, версия операционной системы, уникальный идентификатор устройства и многое другое.

Основные возможности react-native-device-info

• Получение информации об устройстве: модель, производитель, версия ОС и т.д.
• Получение информации о приложении: версия, имя, идентификатор пакета и т.д.
• Получение информации о системе: языковые настройки, часовой пояс и т.д.
• Возможность работы как на iOS, так и на Android.

Установка

Для установки react-native-device-info выполните следующую команду:

npm install react-native-device-info

Или с использованием Yarn:

yarn add react-native-device-info

После установки необходимо связать библиотеку:

npx react-native link react-native-device-info

Основное использование

Для использования react-native-device-info импортируйте библиотеку и используйте необходимые методы для получения информации об устройстве.

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const DeviceInfoExample = () => {
  const [deviceName, setDeviceName] = useState('');
  const [systemVersion, setSystemVersion] = useState('');

  useEffect(() => {
    DeviceInfo.getDeviceName().then(name => {
      setDeviceName(name);
    });

    setSystemVersion(DeviceInfo.getSystemVersion());
  }, []);

  return (
    
      Device Name: {deviceName}
      System Version: {systemVersion}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default DeviceInfoExample;

Получение информации об устройстве

Вы можете получить различные данные об устройстве, такие как уникальный идентификатор, модель, производитель и многое другое.

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const DeviceDetails = () => {
  const [deviceInfo, setDeviceInfo] = useState({});

  useEffect(() => {
    const info = {
      uniqueId: DeviceInfo.getUniqueId(),
      brand: DeviceInfo.getBrand(),
      model: DeviceInfo.getModel(),
      systemName: DeviceInfo.getSystemName(),
      systemVersion: DeviceInfo.getSystemVersion(),
      buildNumber: DeviceInfo.getBuildNumber(),
      appVersion: DeviceInfo.getVersion(),
      appName: DeviceInfo.getApplicationName(),
      batteryLevel: null,
    };

    DeviceInfo.getBatteryLevel().then(level => {
      info.batteryLevel = level;
      setDeviceInfo(info);
    });
  }, []);

  return (
    
      Unique ID: {deviceInfo.uniqueId}
      Brand: {deviceInfo.brand}
      Model: {deviceInfo.model}
      System Name: {deviceInfo.systemName}
      System Version: {deviceInfo.systemVersion}
      Build Number: {deviceInfo.buildNumber}
      App Version: {deviceInfo.appVersion}
      App Name: {deviceInfo.appName}
      Battery Level: {deviceInfo.batteryLevel}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    marginBottom: 5,
  },
});

export default DeviceDetails;

События и уведомления

React Native Device Info также поддерживает события и уведомления, такие как изменение уровня заряда батареи или подключение к сети.

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const BatteryInfo = () => {
  const [batteryLevel, setBatteryLevel] = useState(null);

  useEffect(() => {
    const subscription = DeviceInfo.addEventListener('batteryLevelDidChange', (level) => {
      setBatteryLevel(level);
    });

    DeviceInfo.getBatteryLevel().then(level => {
      setBatteryLevel(level);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    
      Battery Level: {batteryLevel}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default BatteryInfo;

Другие полезные методы

React Native Device Info предоставляет множество других полезных методов для получения информации об устройстве.

• DeviceInfo.isEmulator(): Проверяет, запущено ли приложение на эмуляторе.
• DeviceInfo.getUsedMemory(): Возвращает объем используемой памяти.
• DeviceInfo.getFreeDiskStorage(): Возвращает объем свободного места на диске.
• DeviceInfo.getUserAgent(): Возвращает строку User Agent.
• DeviceInfo.isBatteryCharging(): Проверяет, заряжается ли батарея.
• DeviceInfo.isPinOrFingerprintSet(): Проверяет, установлен ли PIN-код или отпечаток пальца.

Пример использования других методов

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const AdditionalDeviceInfo = () => {
  const [memoryInfo, setMemoryInfo] = useState('');
  const [diskInfo, setDiskInfo] = useState('');
  const [userAgent, setUserAgent] = useState('');

  useEffect(() => {
    DeviceInfo.getUsedMemory().then(memory => {
      setMemoryInfo(`Used Memory: ${memory} bytes`);
    });

    DeviceInfo.getFreeDiskStorage().then(disk => {
      setDiskInfo(`Free Disk Storage: ${disk} bytes`);
    });

    DeviceInfo.getUserAgent().then(agent => {
      setUserAgent(`User Agent: ${agent}`);
    });
  }, []);

  return (
    
      {memoryInfo}
      {diskInfo}
      {userAgent}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    marginBottom: 5,
  },
});

export default AdditionalDeviceInfo;

Заключение

react-native-device-info — это мощная библиотека для получения подробной информации о текущем устройстве в приложениях React Native. Она предоставляет множество полезных методов и событий, которые помогают разработчикам создавать более информативные и функциональные приложения. Благодаря простоте использования и гибкости, эта библиотека является отличным выбором для получения данных об устройстве.