<TIL> React -Native LongPress 구현 - Trello(8)

트렐로의 기능을 보면 boardlist에서 

하나의 보드를 터치하면 그 보드의 정보를 볼 수 있는 

InBoard component로 이동하도록 TouchableOpacity 사용하였습니다.

 

또한 onPress 옵션에 인자로  

 

() => this.props.navigation.navigate('InBoard")

 

를 사용 InBoard component로 이동하게 만들었습니다.

 

또한 navigate로 이동할때에는 각각의 board의 id값을 props로 넘겨줘야 하기 때문에

 

() => this.props.navigation.navigate('InBoard", { id : board.id })

 

이렇게 id 값을 넘겨주었습니다.

 

 

 

하지만 Trello의 모바일 앱을 보면 그냥 짧게 누르면 board안으로 들어가지만 길게 누르면 수정, 삭제, 등... 할 수 있는 창이 나타납니다.

 

이렇게 그냥 누르는 것과 짧게 누르는 것이 다르게 작동하기 때문에 오랫동안 누르는 경우 이벤트가 발생하게 하는 것을 찾아보았습니다.

 

그래서 찾은 것이 

"TouchableHighlight"

TouchableOpacity 사용한 부분을 지우고 TouchableHighlight로 변경해줍니다,

 

여기에 onLongPress 옵션을 추가하고 안에 함수로 정보를 보여줄수 있게 하는 함수를 넣으면 됩니다.

longPressButton = () => {
    alert('LOOOOOOOOOOOOOOONNNNNNGGGGGGG');
  }

  render() {
    const { BoardList } = this.state;
    return (
      <View style={styles.total}>
      <ScrollView>
        <View style={styles.Home}>
          {BoardList.length > 0 ? (
          <>
          {BoardList.map((board) => (
            <TouchableHighlight
            onPress={() => this.props.navigation.navigate('InBoard', { id: board.id, name: board.title })}
            onLongPress={this.longPressButton}>
            <BoardsTitle title={board.title} id={board.id} />
            </TouchableHighlight>
          ))}
          </>
        </View>
       </ScrollView>
       </View>
   )
   ...}