리액트네이티브 초보인데요...화면에 전체 이미지 띄웠다가 사라지게 하고 싶습니다

안녕하세요. 리액트네이티브로 앱을 만들어보려고 공부중인 초보입니다.

간단한 퀴즈앱을 만들어보고 있는데, 사용자가 정답을 입력하고 확인을 눌렀을때

정답/오답 여부에 따라서 화면전체에 O/X 이미지를 잠깐 띄웠다가 사라지게 하고 싶습니다.

position을 absolute로 해서 띄우면 될까해서 하려고보니, 이미지도 잠깐 떳다가 사라져야되는데, 그럼 render함수에서 처리할 수 있는건지… 어렵네요…ㅠ

아시는 분 도움좀 부탁드립니다.

네, absolute로 전체화면 잡아서 띄우거나, modal을 사용해도 될거 같아요.

전체화면 잡은 컨포넌트에 이미지를 넣으면 됩니다.

이미지 렌더링 여부를 나타내는 state를 지정하시고,
해당 state값에 따라 이미지를 렌더링 하도록 render함수내에서 처리하시면 될 듯 합니다.
확인버튼을 눌렀을 때 해당 이벤트를 처리하는 핸들러 내에서 해당 state 값을 true로 바꾸고, setTimeout을 통해 일정 시간 후 다시 false로 바꾸도록 하고요.
문법은 대충 썼지만 대략 아래와 같은 로직으로 처리하시면 될 것 같습니다.
띄우는 방식은 말씀하신대로 하시면 될 것 같구요.

function ExampleComponent = () => {
  const [visible, setVisible] = useState(false);
  const [answer, setAnswer] = useState('');

  return (
    <View>
      <Text>
        질문
      </Text>
      <TextInput onChange={setAnswer} />
      <Button onPress={() => {
        if(answer === 'rightAnswer') {
          setVisible(true);
          setTimeout(() => setVisible(false), 2000);
        }
      }}/>
    </View>
  )
}
1 Like