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

Question

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

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
      }
    })
  }
/>

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

How can I create cross platform icon in react native?

javascript

reactjs

react-native

react-native-android

react-native-ios