Reageer native styling met voorwaarde

Het is nieuw voor mij om native te reageren. Ik probeer de stijl van de TextInput te wijzigen wanneer er een fout is opgetreden.

Hoe kan ik mijn code niet zo lelijk maken?

<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>

Antwoord 1, autoriteit 100%

Gebruik StyleSheet.createom op deze manier stijlcomposities te maken,

maak stijlen voor tekst, geldige teksten ongeldige tekst.

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

en groepeer ze vervolgens met een reeks stijlen.

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

Voor arraystijlen worden de laatste samengevoegd met de eerste, met een overschrijfregel voor dezelfde sleutels.

Antwoord 2, autoriteit 7%

Update uw code als volgt:

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

Schrijf dan buiten je klascomponent:

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

Antwoord 3

Er zijn twee manieren, door inline of door een functie aan te roepen:

1)

const styles = StyleSheet.create({
    green: {
        borderColor: 'green',
    },
    red: {
        borderColor: 'red',
    },
});
<TextInput style={[styles.otpBox, this.state.stateName ?
    styles.green :
    styles.red ]} />

getstyle(val) {
    if (val) {
        return { borderColor: 'red' };
    }
    else {
        return { borderColor: 'green' };
    }
}
<TextInput style={[styles.otpBox, this.getstyle(this.state.showValidatePOtp)]} />