Реагировать Нативный стиль с условным

Я новичок в ответ на родной язык. Я пытаюсь изменить стиль TextInput при возникновении ошибки.

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

<TextInput
      style={touched && invalid?
        {height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'} :
        {height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10}}
</TextInput>

Ответ 1

Используйте StyleSheet.create чтобы сделать композицию стиля следующим образом:

создавать стили для текста, допустимого текста и недействительного текста.

const styles = StyleSheet.create({
    text: {
        height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, 
    },
    textvalid: {
        borderWidth: 2,
    },
    textinvalid: {
        borderColor: 'red',
    },
});

а затем сгруппировать их вместе с массивом стилей.

<TextInput
    style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}
</TextInput>

Для стилей массива последние будут объединены в первый с правилом перезаписи для тех же ключей.

Ответ 2

Обновите свой код следующим образом:

<TextInput style={getTextStyle(this.state.touched, this.state.invalid)}></TextInput>

Затем вне вашего класса компонент напишите:

getTextStyle(touched, invalid) {
 if(touched && invalid) {
  return {
    height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'
  }
 } else {
   return {
      height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10
   }
 }
}