Как я могу создать значок кроссплатформенности в реагировать родной?

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