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

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

0 голосов
/ 31 августа 2018

Я создаю форму регистрации и хочу добавить значки, но значок должен выглядеть по-разному на разных платформах, например. Если я использую Ionicons , он должен показывать ios-person на устройстве ios и md-person на Android-устройства. Как я могу создать собственный компонент, подобный этому, поэтому я просто импортирую его в свою форму экрана регистрации и добавляю значок, основанный на вводе текста, например, имя человека.

1 Ответ

0 голосов
/ 31 августа 2018

Вы можете определить значок на основе платформы, например так: 

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