react-native useRef 로 style css 변경하는법 질문있습니다

#1

const inputRef = useRef();

const onHandleSelect= ( data, e ) => {
inputRef.current.style = styleCommon.rb_menu_active;
}

< TouchableOpacity onPress={() => onHandleSelect(“국어”,“rb1”)}>
< Text ref={inputRef} style={styleCommon.rb_menu_inactive}>국어
</ TouchableOpacity>’

//css부분
export const styleCommon = StyleSheet.create({
rb_menu_active:{
marginRight:10,
width: 60,
height: 30,
backgroundColor: “#fe5746”,
textAlign: ‘center’,
fontSize: 20,
fontWeight: ‘bold’
},
})
위는 제가구현한 코드입니다 클릭시 text 색이 위에 지정한 색으로 바뀌어야하는데
inputRef지정한 text태그 css값이 바뀌지않고 반응이없습니다
혹시 제가 실수한게있을지…

#2

react-native element의 스타일을 ref로 조작하는 방법은 바람직하지 않습니다. state를 이용하여 스타일을 조작하는 것을 추천드립니다

#3

역시 구글링해도 만족할만한 답을얻지 못했는데 이유가있었군요 감사합니다
ㅎㅎ

2020년 12월 28일 (월) 오후 7:19, chequerNoel via 자바스크립트 개발자 포럼 [email protected]님이 작성:

#4

ref로 스타일을 주는 경우에는 ref.current.style.display 처럼 주고자 하는 속성에 직접 접근하시면 스타일을 줄 수 있어요. 여기서 style 객체는 어떤 값을 바인딩하는게 아니라 read only에요.
예를들어 글자 색상을 바꿀때는 아래와 같이 작성합니다.
ref.current.style.color = “red”:

#5

ㅎㅎ 연초작업이바뻐서 늦게봤네요 말씀하신데로 ref로 직접 값을 주니 read only로 제어가안되더군요
그래서 useState 이용해서 true false값 여부로 판단해서 스타일주는방식으로 처리했습니다.

답변감사하고 새복많이 받으세요!

1 Like