编程马·菜鸟教程

Appearance

设备信息获取 ​

1. 设备信息获取简介 ​

在 React Native 应用中，获取设备信息是一项常见的需求。设备信息可以用于：

  • 适配不同设备的屏幕尺寸和分辨率
  • 针对特定设备型号优化功能
  • 收集用户设备信息用于分析
  • 实现设备特定的功能
  • 提供更好的用户体验

在 React Native 中，获取设备信息主要通过以下方式：

  1. 使用 React Native 内置的 API
  2. 使用第三方库，如 react-native-device-info

2. 使用内置 API ​

2.1 平台信息 ​

javascript
import { Platform, Dimensions } from 'react-native';

// 平台信息
const platform = Platform.OS; // 'ios' 或 'android'
const version = Platform.Version; // 平台版本号

// 设备尺寸
const { width, height } = Dimensions.get('window');
const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');

// 屏幕密度
const scale = Dimensions.get('window').scale;

console.log('平台:', platform);
console.log('平台版本:', version);
console.log('窗口尺寸:', { width, height });
console.log('屏幕尺寸:', { screenWidth, screenHeight });
console.log('屏幕密度:', scale);

2.2 网络信息 ​

javascript
import NetInfo from '@react-native-community/netinfo';

// 监听网络状态
const unsubscribe = NetInfo.addEventListener(state => {
  console.log('网络状态:', state);
  console.log('是否连接:', state.isConnected);
  console.log('网络类型:', state.type); // 'wifi', 'cellular', 'unknown', 'none'
  console.log('网络详情:', state.details);
});

// 获取当前网络状态
NetInfo.fetch().then(state => {
  console.log('当前网络状态:', state);
});

// 取消监听
// unsubscribe();

2.3 电池信息 ​

javascript
import { BatteryState, BatteryLevel } from 'react-native';

// 获取电池电量
BatteryLevel.then(level => {
  console.log('电池电量:', level * 100, '%');
});

// 获取电池状态
BatteryState.then(state => {
  switch (state) {
    case 0: // BatteryState.UNKNOWN
      console.log('电池状态: 未知');
      break;
    case 1: // BatteryState.UNPLUGGED
      console.log('电池状态: 未充电');
      break;
    case 2: // BatteryState.CHARGING
      console.log('电池状态: 充电中');
      break;
    case 3: // BatteryState.FULL
      console.log('电池状态: 已充满');
      break;
  }
});

3. 使用第三方库 ​

对于更详细的设备信息，我们可以使用 react-native-device-info 库。

3.1 安装 ​

bash
npm install react-native-device-info
# 或
npx expo install react-native-device-info

3.2 基本使用 ​

javascript
import DeviceInfo from 'react-native-device-info';

// 设备唯一标识符
const deviceId = DeviceInfo.getDeviceId();

// 设备型号
const model = DeviceInfo.getModel();

// 设备名称
const deviceName = DeviceInfo.getDeviceName();

// 系统名称
const systemName = DeviceInfo.getSystemName();

// 系统版本
const systemVersion = DeviceInfo.getSystemVersion();

// 应用名称
const appName = DeviceInfo.getApplicationName();

// 应用版本
const appVersion = DeviceInfo.getVersion();

// 应用构建号
const buildNumber = DeviceInfo.getBuildNumber();

// 包名
const bundleId = DeviceInfo.getBundleId();

// 品牌
const brand = DeviceInfo.getBrand();

// 制造商
const manufacturer = DeviceInfo.getManufacturer();

// 屏幕密度
const density = DeviceInfo.getDevicePixelRatio();

// 设备类型
const deviceType = DeviceInfo.getDeviceType(); // 'handset', 'tablet', 'tv'

// 是否是模拟器
const isEmulator = DeviceInfo.isEmulator();

// 是否是平板
const isTablet = DeviceInfo.isTablet();

console.log('设备ID:', deviceId);
console.log('设备型号:', model);
console.log('设备名称:', deviceName);
console.log('系统名称:', systemName);
console.log('系统版本:', systemVersion);
console.log('应用名称:', appName);
console.log('应用版本:', appVersion);
console.log('构建号:', buildNumber);
console.log('包名:', bundleId);
console.log('品牌:', brand);
console.log('制造商:', manufacturer);
console.log('屏幕密度:', density);
console.log('设备类型:', deviceType);
console.log('是否是模拟器:', isEmulator);
console.log('是否是平板:', isTablet);

3.3 高级信息 ​

javascript
import DeviceInfo from 'react-native-device-info';

// 获取IP地址
const ipAddress = await DeviceInfo.getIPAddress();

// 获取MAC地址（注意：Android 6.0+ 已不再支持）
const macAddress = DeviceInfo.getMacAddress();

// 获取API级别（仅Android）
const apiLevel = DeviceInfo.getApiLevel();

// 获取电池电量
const batteryLevel = await DeviceInfo.getBatteryLevel();

// 获取电池状态
const batteryState = DeviceInfo.getBatteryState();

// 获取存储空间
const totalStorage = await DeviceInfo.getTotalDiskCapacity();
const freeStorage = await DeviceInfo.getFreeDiskStorage();

// 获取内存信息
const totalMemory = DeviceInfo.getTotalMemory();

// 获取网络类型
const networkType = DeviceInfo.getNetworkType();

// 获取运营商
const carrier = DeviceInfo.getCarrier();

// 获取国家代码
const countryCode = DeviceInfo.getDeviceCountry();

// 获取语言
const language = DeviceInfo.getDeviceLanguage();

console.log('IP地址:', ipAddress);
console.log('MAC地址:', macAddress);
console.log('API级别:', apiLevel);
console.log('电池电量:', batteryLevel);
console.log('电池状态:', batteryState);
console.log('总存储空间:', totalStorage);
console.log('可用存储空间:', freeStorage);
console.log('总内存:', totalMemory);
console.log('网络类型:', networkType);
console.log('运营商:', carrier);
console.log('国家代码:', countryCode);
console.log('语言:', language);

4. 实际应用场景 ​

4.1 设备适配 ​

javascript
import { Platform, Dimensions } from 'react-native';
import DeviceInfo from 'react-native-device-info';

// 适配不同屏幕尺寸
const { width, height } = Dimensions.get('window');
const isTablet = DeviceInfo.isTablet();

// 根据设备类型设置不同的布局
const getLayout = () => {
  if (isTablet) {
    return {
      container: { padding: 20 },
      fontSize: 18,
      columnCount: 3
    };
  } else {
    return {
      container: { padding: 10 },
      fontSize: 16,
      columnCount: 2
    };
  }
};

// 根据平台设置不同的样式
const getPlatformSpecificStyle = () => {
  return Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    },
    android: {
      elevation: 5,
    },
  });
};

4.2 应用分析 ​

javascript
import DeviceInfo from 'react-native-device-info';

// 收集设备信息用于分析
const collectDeviceInfo = () => {
  return {
    deviceId: DeviceInfo.getDeviceId(),
    model: DeviceInfo.getModel(),
    brand: DeviceInfo.getBrand(),
    systemName: DeviceInfo.getSystemName(),
    systemVersion: DeviceInfo.getSystemVersion(),
    appVersion: DeviceInfo.getVersion(),
    buildNumber: DeviceInfo.getBuildNumber(),
    isTablet: DeviceInfo.isTablet(),
    isEmulator: DeviceInfo.isEmulator(),
    country: DeviceInfo.getDeviceCountry(),
    language: DeviceInfo.getDeviceLanguage(),
  };
};

// 发送设备信息到服务器
const sendDeviceInfo = async () => {
  try {
    const deviceInfo = collectDeviceInfo();
    await api.sendDeviceInfo(deviceInfo);
    console.log('设备信息发送成功');
  } catch (error) {
    console.error('发送设备信息失败:', error);
  }
};

4.3 功能限制 ​

javascript
import DeviceInfo from 'react-native-device-info';

// 根据设备能力限制功能
const checkDeviceCapabilities = () => {
  const systemVersion = parseFloat(DeviceInfo.getSystemVersion());
  const isEmulator = DeviceInfo.isEmulator();
  
  return {
    canUseNewFeature: systemVersion >= 13.0, // 需要 iOS 13+ 或 Android 10+
    canUseCamera: !isEmulator, // 模拟器可能没有摄像头
    canUseLocation: !isEmulator, // 模拟器可能没有定位
  };
};

// 根据设备能力显示不同功能
const renderFeatureButton = () => {
  const capabilities = checkDeviceCapabilities();
  
  if (capabilities.canUseNewFeature) {
    return <Button title="新功能" onPress={handleNewFeature} />;
  } else {
    return <Text>需要更新系统以使用此功能</Text>;
  }
};

5. 最佳实践 ​

  1. 权限处理：

    • 注意获取某些设备信息可能需要权限
    • 遵循平台的隐私政策

  2. 性能考虑：

    • 避免频繁获取设备信息
    • 缓存设备信息以提高性能

  3. 平台差异：

    • 注意不同平台获取设备信息的差异
    • 使用 Platform.select 处理平台特定代码

  4. 隐私保护：

    • 不要收集不必要的设备信息
    • 对敏感信息进行匿名化处理
    • 遵循 GDPR、CCPA 等隐私法规

  5. 错误处理：

    • 处理获取设备信息时可能出现的错误
    • 提供默认值以确保应用正常运行

6. 常见问题与解决方案 ​

6.1 设备信息获取失败 ​

问题：无法获取某些设备信息

解决方案：

  • 检查是否有相应的权限
  • 检查库的版本是否兼容
  • 处理可能的异常情况
  • 提供默认值

6.2 平台差异 ​

问题：在不同平台上获取的设备信息不一致

解决方案：

  • 使用平台特定的代码
  • 测试在不同平台上的表现
  • 对平台差异进行适配

6.3 隐私政策问题 ​

问题：收集设备信息可能违反隐私政策

解决方案：

  • 只收集必要的设备信息
  • 向用户说明收集的信息及其用途
  • 获得用户的同意
  • 遵循相关的隐私法规

6.4 性能问题 ​

问题：频繁获取设备信息影响性能

解决方案：

  • 缓存设备信息
  • 只在必要时获取设备信息
  • 避免在渲染过程中获取设备信息

7. 扩展阅读 ​

8. 完整示例 ​

javascript
// App.js
import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, StyleSheet, Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import NetInfo from '@react-native-community/netinfo';

const App = () => {
  const [deviceInfo, setDeviceInfo] = useState({});
  const [networkInfo, setNetworkInfo] = useState({});

  useEffect(() => {
    // 获取设备信息
    const getDeviceInfo = async () => {
      try {
        const info = {
          deviceId: DeviceInfo.getDeviceId(),
          model: DeviceInfo.getModel(),
          deviceName: DeviceInfo.getDeviceName(),
          systemName: DeviceInfo.getSystemName(),
          systemVersion: DeviceInfo.getSystemVersion(),
          appName: DeviceInfo.getApplicationName(),
          appVersion: DeviceInfo.getVersion(),
          buildNumber: DeviceInfo.getBuildNumber(),
          bundleId: DeviceInfo.getBundleId(),
          brand: DeviceInfo.getBrand(),
          manufacturer: DeviceInfo.getManufacturer(),
          deviceType: DeviceInfo.getDeviceType(),
          isEmulator: DeviceInfo.isEmulator(),
          isTablet: DeviceInfo.isTablet(),
          country: DeviceInfo.getDeviceCountry(),
          language: DeviceInfo.getDeviceLanguage(),
        };

        // 获取异步信息
        const ipAddress = await DeviceInfo.getIPAddress();
        const batteryLevel = await DeviceInfo.getBatteryLevel();
        const batteryState = DeviceInfo.getBatteryState();
        const totalStorage = await DeviceInfo.getTotalDiskCapacity();
        const freeStorage = await DeviceInfo.getFreeDiskStorage();

        setDeviceInfo({
          ...info,
          ipAddress,
          batteryLevel: `${(batteryLevel * 100).toFixed(0)}%`,
          batteryState,
          totalStorage: `${(totalStorage / 1024 / 1024 / 1024).toFixed(2)} GB`,
          freeStorage: `${(freeStorage / 1024 / 1024 / 1024).toFixed(2)} GB`,
        });
      } catch (error) {
        console.error('获取设备信息失败:', error);
      }
    };

    getDeviceInfo();

    // 监听网络状态
    const unsubscribe = NetInfo.addEventListener(state => {
      setNetworkInfo({
        isConnected: state.isConnected,
        type: state.type,
        details: state.details,
      });
    });

    return unsubscribe;
  }, []);

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>设备信息</Text>
      
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>基本信息</Text>
        {Object.entries(deviceInfo).map(([key, value]) => (
          <View key={key} style={styles.infoRow}>
            <Text style={styles.infoKey}>{key}:</Text>
            <Text style={styles.infoValue}>{value}</Text>
          </View>
        ))}
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>网络信息</Text>
        <View style={styles.infoRow}>
          <Text style={styles.infoKey}>是否连接:</Text>
          <Text style={styles.infoValue}>{networkInfo.isConnected ? '是' : '否'}</Text>
        </View>
        <View style={styles.infoRow}>
          <Text style={styles.infoKey}>网络类型:</Text>
          <Text style={styles.infoValue}>{networkInfo.type || '未知'}</Text>
        </View>
        <View style={styles.infoRow}>
          <Text style={styles.infoKey}>网络详情:</Text>
          <Text style={styles.infoValue}>
            {networkInfo.details ? JSON.stringify(networkInfo.details) : '未知'}
          </Text>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    margin: 20,
    textAlign: 'center',
  },
  section: {
    backgroundColor: '#fff',
    margin: 10,
    padding: 15,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 3.84,
    elevation: 5,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  infoRow: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  infoKey: {
    width: 120,
    fontWeight: '500',
    color: '#666',
  },
  infoValue: {
    flex: 1,
    color: '#333',
  },
});

export default App;

这个示例展示了如何使用 react-native-device-info 库获取详细的设备信息，包括基本信息、网络信息等，并在应用中显示这些信息。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建