Reagieren Sie Native Styling mit bedingten

Question

Ich bin neu, native reagieren. Ich versuche, das Design des TextInput zu ändern, wenn ein Fehler auftritt.

Wie kann ich meinen Code nicht so hässlich machen?

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

Answer 1

Verwendung StyleSheet.create Stil Zusammensetzung für dies zu tun,

Stile für Text, gültigen Text machen, und ungültig Text.

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

und dann gruppieren sie zusammen mit einem Array von Stilen.

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

Bei Array-Stilen werden die zuletzt genannten mit der Überschreibungsregel für die gleichen Schlüssel in die frühere verschmelzen.

Answer 2

Code Aktualisieren Sie wie folgt vor:

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

außerhalb Ihrer Klasse Komponente Dann schreiben:

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