가변 css 스타일링을 적용하고 싶습니다

 const [ hidden, onHidden ] = useState(false);
<Text hidden={hidden}>로그인 실패</Text>
  display: `${props=> props.hidden? 'block' : 'none'}`,

이렇게 css를 가변으로 주어 평소에 숨어있다가 해당값을 인자로 주면 작동하게 하고 싶습니다.
해당 자료를 찾고 싶은데, 찾아도 해당 자료가 없는 것보니 RN에서는 사용이 불가능 기능인가요?

평소에 숨어있다가 나타나는거라면
{hidden && (로그인 실패)} 로 사용하시면 더 간단하게 구현할 수 있습니다.
말씀하시는 방식도 사용가능한것으로 알고있습니다.

좋아요 1

가변 CSS로 스타일링을 적용하고 싶은데, 방법을 못 찾아서 그렇게 적용해두었습니다.

stylesheet를 사용하신다면

< Text hidden={hidden} style={styles.text} >로그인 실패</Tex t>

const styles = StyleSheet.create({
text : (props)=>{
return{
display:props.hidden ? ‘block’ : ‘none’
}
}
}) 이렇게 사용하시면 될것같습니다.
StyleSheet없이
const textStyles = (props) => {
return {
display:props.hidden ? ‘block’ : ‘none’
}
}
이렇게 하셔도 될거고요
코드블럭을 안넣으니 <>가 html태그로 인식되는거같네요; </Tex t> 의 공백은 지우시면 됩니다.

좋아요 1

답변 감사합니다.
3항 연산자로 그냥 css 두개 만들어서 적용해버렸습니다.
다음에는 위 말씀대로 한번 적용해보겠습니다.

좋아요 1