Skip to content

设备API

· 3 min

设备 API 主要用于获取当前用户的设备相关信息，从而根据不同的设备信息来做出可能不同的操作。主要包括：

Platform#

Platform 主要用于获取设备的相关信息。下面是官方提供的一个示例：

import React from 'react'
import { Platform, StyleSheet, Text, ScrollView } from 'react-native'


const App = () => {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text>OS</Text>
      <Text style={styles.value}>{Platform.OS}</Text>
      <Text>OS Version</Text>
      <Text style={styles.value}>{Platform.Version}</Text>
      <Text>isTV</Text>
      <Text style={styles.value}>{Platform.isTV.toString()}</Text>
      {Platform.OS === 'ios' && (
        <>
          <Text>isPad</Text>
          <Text style={styles.value}>{Platform.isPad.toString()}</Text>
        </>
      )}
      <Text>Constants</Text>
      <Text style={styles.value}>
        {JSON.stringify(Platform.constants, null, 2)}
      </Text>
    </ScrollView>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  value: {
    fontWeight: '600',
    padding: 4,
    marginBottom: 8,
  },
})


export default App

PlatformColor#

每个平台都有系统定义的颜色，尽管可以通过 AppearanceAPI 或 AccessibilityInfo 检测并设置其中的某些样式，但是这样的操作不仅开发成本高昂，而且还局限。

RN 从 0.63 版本开始提供了一个开箱即用的解决方案来使用这些系统颜色。PlatformColor 是一个新的 API，可以像 RN 中的其它任何颜色一样使用。

例如，在 iOS 上，系统提供一种颜色 labelColor，可以在 RN 中这样使用 PlatformColor：

import { Text, PlatformColor } from 'react-native'


;<Text style={{ color: PlatformColor('labelColor') }}>This is a label</Text>

另一方面，Android 提供像 colorButtonNormal 这样的颜色，可以在 RN 中这样使用 PlatformColor：

import { View, Text, PlatformColor } from 'react-native'


;<View
  style={{
    backgroundColor: PlatformColor('?attr/colorButtonNormal'),
  }}
>
  <Text>This is colored like a button!</Text>
</View>

同时 DynamicColorIOS 是仅限于 iOS 的 API，可以定义在浅色和深色模式下使用的颜色。与 PlatformColor 相似，可以在任何可以使用颜色的地方使用：

import { Text, DynamicColorIOS } from 'react-native'


const customDynamicTextColor = DynamicColorIOS({
  dark: 'lightskyblue',
  light: 'midnightblue',
})


;<Text style={{ color: customDynamicTextColor }}>
  This color changes automatically based on the system theme!
</Text>

下面是来自官方的一个示例：

import React from 'react'
import { Platform, PlatformColor, StyleSheet, Text, View } from 'react-native'


const App = () => (
  <View style={styles.container}>
    <Text style={styles.label}>I am a special label color!</Text>
  </View>
)


const styles = StyleSheet.create({
  label: {
    padding: 16,
    ...Platform.select({
      ios: {
        color: PlatformColor('label'),
        backgroundColor: PlatformColor('systemTealColor'),
      },
      android: {
        color: PlatformColor('?android:attr/textColor'),
        backgroundColor: PlatformColor('@android:color/holo_blue_bright'),
      },
      default: { color: 'black' },
    }),
  },
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})


export default App

Appearance#

Appearance 模块主要用于获取用户当前的外观偏好。目前的手机系统一般都可以选择浅色模式和深色模式，通过 Appearance 模块，开发者就可以获取此信息。

Appearance 模块提供了一个 getColorScheme 的静态方法，该方法可以获取当前用户首选的配色方案，对应的值有 3 个：

例如：

import React from 'react'
import { StyleSheet, Text, View, Appearance } from 'react-native'


const App = () => {
  return (
    <View style={styles.container}>
      <Text>外观偏好</Text>
      <Text style={styles.value}>{Appearance.getColorScheme()}</Text>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  value: {
    fontWeight: '600',
    padding: 4,
    marginBottom: 8,
  },
})


export default App