Условный рендеринг цвета границы React Native

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Я пытаюсь условно изменить цвет своей границы в зависимости от того, находится ли TextInput в фокусе или нет.

 <View
style={focus? { ...styles.inputRow, ...bgColorOnFocus }: { ...styles.inputRow, ...bgColorOnBlur }}>
 

Это работает, как и ожидалось, но мне приходится дважды повторять стили ввода. Я пытался улучшить код с помощью следующего кода, в котором я добавляю объект в зависимости от того, находится ли он в фокусе или нет, и он выдает ошибку.

 <View style ={
{...styles.inputRow, focus? ...bgColorOnFocus: ...bgColorOnBlur}}
>
 

Я не уверен, что я глуп, или если чего-то не хватает, с чем я не знаком? Спасибо, что изучили это!

Ответ №1:

Обычно style prop принимает массив в качестве значения:

 <View style={[styles.inputRow, isFocus ? bgColorOnFocus : bgColorOnBlur]}>
 

это допустимый способ условного рендеринга некоторого стиля.