Как я могу создать кросс-платформенный значок в React Native?
Я создаю форму регистрации и хочу добавить значки, но значок должен выглядеть по-другому на другой платформе, например, если я использую Иониконы, он должен отображать ios-person на устройстве ios и md-person на устройствах Android. Как я могу создать такой пользовательский компонент, чтобы я просто импортирую его в свой Экранная форма регистрации и добавляю значок на основе ввода текста, например, имя человека.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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
}
})
}
/>
@ user9824674 - Проверьте последний фрагмент, он изменит имя и размер. Я бы лично создал повторно используемый компонент (например, третий фрагмент)
Ты прав!! Настроенный многоразовый компонент всегда будет хорош. Но как мне добавить размер в 3-й? я использую правильный способ или размер? size = {${Platform.OS === "ios" ? "25" : "35"}-${size}}
Спасибо, сработало !! Я использовал первый способ. Я также пытаюсь изменить размер значка в зависимости от платформы, на которой я использовал этот метод для размера. size = {Platform.select ({ios: '24', android: '34',})} однако он не работает на android, хотя он отлично работает на ios, я пробовал перекусить