[React-Native] Todo 앱 만들기(1/6)_Touchables

Introduction

프로젝트 생성

expo init (프로젝트명) --npm
expo init WorkHardTravelHardApp --npm

 

---

Touchables

헤더 만들기

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from "react-native";
import { theme } from "./colors";

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity>
          <Text style={styles.btnText}>Work</Text>
        </TouchableOpacity>
        <TouchableOpacity>
          <Text style={styles.btnText}>Travel</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.bg,
    paddingHorizontal: 20,
  },
  header: {
    justifyContent: "space-between",
    flexDirection: "row",
    marginTop: 100,
  },
  btnText: {
    fontSize: 38,
    fontWeight: "600",
    color: "white",
  },
});

 

Touchables

<TouchableOpacity>
	<Text style={styles.btnText}>Work</Text>
</TouchableOpacity>

<TouchableHighlight
	underlayColor="#DDDDDD" // 눌렀을 때 색상 설정
	onPress={() => console.log("pressed")}
>
	<Text style={styles.btnText}>Travel</Text>
</TouchableHighlight>

<TouchableWithoutFeedback onPress={() => console.log("pressed")}>
	<Text style={styles.btnText}>Work</Text>
</TouchableWithoutFeedback>

 

- Touchables : 누르는 이벤트를 listen할 준비가 되어있는 View

1. TouchableOpacity : opacity(투명도) / 클릭 시 텍스트에 애니메이션 효과 있음

2. TouchableHighlight : 클릭 시 텍스트 배경에 애니메이션 효과 있음

3. TouchalbeWithoutFeedback : 클릭 시 아무런 UI 변화는 없고 버튼 이벤트만 있음

4. Pressable : TouchableWithoutFeedback과 같은 기능이지만 더 많은 옵션을 설정할 수 있다.

 

- 위와 같이 공식 문서에 보면 좀 더 광범위하게 설정할 수 있는 pressable 추천함 => 없어질 가능성 있음