[리액트네이티브 + expo]터치 할 때마다 이미지 바뀌게 하기

리액트 네이티브 + 엑스포 조합으로 앱을 하나 제작하려고 준비중이다.

생각보다 쉬운 앱인데 간단한 인강 하나 보고 무작정 만드려니 생각보다 쉽지 않다.

우선 기본은 play 버튼이 노출되고 play 버튼을 터치하면 pause 버튼으로 바뀌게 하려고 하는데 html + javascript 조합이었으면 10초면 끝날건데 리액트 네이티브로 하려고 하니 한시간 넘게 걸렸다. 😂

import React, {useState} from 'react';
import { StyleSheet, Text, View, TouchableOpacity , Image} from 'react-native'

import startImg from '../assets/images/start.png'
import pauseImg from '../assets/images/pause_stop.png'

let isStart = false

export default function Main() {

  //start 유무
  const [srtImg, setSrtImg] = useState(startImg);
	
  return (
    <View style = {styles.activeArea}>
       <TouchableOpacity onPress={() => { isStart = !isStart; isStart ? setSrtImg(pauseImg) : setSrtImg(startImg)}}>
          <Image source={srtImg} style = {styles.startImg}/>
       </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  activeArea : {
    flex : 1,
    marginTop : 20
  },
  startImg : {
    width : 100,
    height : 100,
  }
})

isStart를 전역변수로 선언하고 useState에 import 해온 startImg를 초기값으로 셋팅해준다.

Image를 TouchableOpacity로 감싸주고 TouchableOpacity에 onPress 이벤트로 isStart 값을 Toggle 해준 뒤 삼항연산자를 이용해서 이미지를 바꿔준다.

그리고, Image source에 바뀐 이미지를 넣어주면 된다.

더 좋은 방법이 있을 거 같은데 리액트 네이티브를 몇시간 공부하고 만들다보니 뭔가 아쉽다.