JSX에서 조건부 스타일 설정

1. 각 Property에 조건 부여

style={{
  width: 조건1 ? true : false,
  backgroundColor: 조건2 ? true : false
}}

2. 이벤트와 함께 각 Property에 조건 부여

style={{
  width: 조건1 ? true : false, 
  backgroundColor: 조건2 ? true : false,
  "&:hover": {
    backShadow: 조건3 ? true : false
  }
}}

3. Properties 객체를 통째로 조건 부여

style={ 조건 ? {
  width: "80%",
  backgroundColor: "#FFF"
} : {
  width: "60%",
  backgroundColor: "#DDD"
}}

4. StyleSheet.create 활용해 배열 형식으로 여러가지 Style Class 부여

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

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