有条件地渲染边框颜色 React Native

Question

I'm trying to conditionally change my border color based on whether the textInput is under focus or not.

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

This works as expected, but I'm having to repeat inputRow styles twice. I've been trying to improve the code with the following code where I add the object based on whether it's on focus or not and it's throwing an error.

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

I'm not sure if I'm being silly, or if there's something missing that I'm not familiar with? Thanks for looking into this!

Answer 1

Typically a style prop accept an array as a value:

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

is a valid way to conditionally render some style.