如何在React Native中创建跨平台图标？

Question

我正在建立一个注册表单，我想添加图标，但是图标在不同的平台上看起来应该有所不同，例如，如果我使用Ionicons，它应该在ios设备上显示ios-person，在android设备上显示md-person。 我该如何构建这样的自定义组件，以便仅将其导入到“ 注册”屏幕表单中，并基于文本输入（例如姓名用户）添加图标即可。

Answer 1

您可以根据平台确定图标，如下所示：

import { Platform } from 'react-native';

<Ionicons
  name={Platform.select({
    ios: 'ios-person',
    android: 'md-person',
  })}
/>

如果唯一的区别是ios和md 。

<Ionicons 
  name={`${Platform.OS === "ios" ? "ios" : "md"}-person`}
/>

可能是可重用的组件

const Icon = ({ name }) => (
  <Ionicons 
    name={`${Platform.OS === "ios" ? "ios" : "md"}-${name}`}
  />
)

// Usage
<Icon name="person" />

再一次，这假设唯一不同的是ios和md 。

编辑

可以像这样根据每个平台更新name和size

<Ionicons
  {
    ...Platform.select({
      ios: {
        name: 'ios-person',
        size: 25,
      },
      android: {
        name: 'md-person',
        size: 35
      }
    })
  }
/>