[RN] TODO APP - 헤더 만들기

이번 TO-DO APP은 RN에서 데이터 유지를 어떻게 시키는지에 대해서 알아볼 것이다.

그럼 expo init 파일이름 --npm을 하고 프로젝트를 만들어주자 (❁´◡`❁)

 

기본 setting

padding

css에서는 padding right나 padding left 같은 것들이 있는데 css에 없는 속성인padding을 가로,세로 방향으로 줄 수도 있다.

바로 paddingVertical과 paddingHorizontal이다. 

++)padding :"50px 10px" 이면 위,아래를 50px, 좌우로 10px을 주겠다는 것이다. 

 

space-between

space between을 통해 요소들 사이에 동일한 간격을 준다. 

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableWithoutFeedbackBase, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container}>
   
      <StatusBar style="auto" />
 
      <View style={styles.header}>
 
      </View>
      <Text style={styles.btnText}>Work</Text>
      <Text style={styles.btnText}>Travel</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    padding:"50 10px",
    paddingHorizontal:20,
  },
  header:{
    justifyContent:"space-between",
    flexDirection:"row",
    marginTop:100,
 
  },
  btnText:{
    fontSize:38,
    fontWeight:"600",
    color:"white",
  }
});
 

 

 

여기서 Work 버튼을 누른다면 폰트 색깔이 하얀색이 되게 만들어볼 것이다. 

 

theme object를 만들어줬는데, 

bg은 배경의 검은색깔을 의미하고, grey는 유저가 travel을 클릭하기 전에는 회색을 띄우기 위해 만들어 놓은 것이다.

 

expo try again go back to expo home 에러

 

아주 엿같았던 에러이다.

expo app에서 알려준 trouble shooting방법을 따라하니까 됐는데

 

1. vscode에서 expo 업데이트를 한다.

 

npm install -g expo-cli

 

2. expo app을 업데이트 한다. ✨

 

아주 골때린다. 나는 expo app을 업데이트 하지 않아서 1시간 내내 저 에러와 싸웠다.하하핳

 

button

버튼에는 매우 흥미로운 3가지 컴포넌트들이 있다.

 

Touchable

 

1) Touchable Opacity

 

누르는 이벤트를 listen할 준비가 된 view

opacity 가 들어있는 이유는 여기에 애니메이션 효과가 있기 때문이다. 

또한 클릭했을때 투명도도 설정할 수 있다!

 

2)TouchableHighlight

 

더 많은 속성 가진다. 

요소를 클릭했을 때 배경색이 바뀌게 해준다.

onPress는 Touchable을 눌렀을때 실행되는 이벤트를 말한다. 

onPressIn은 손가락이 그 영역에 들어갈 때를 말하고, onPressOut는 손가락이 그 영역에서

벗어날 때를 말한다. onLongPress는 손가락이 영역에 들어가서 오래 머무를 때를 말한다.

 

TouchableHighlight는 underlayColor를 설정해줘야 한다. 이건 배경색 설정해주는 거고, 그 배경색의

투명도를 설정하기 위해서는 activeOpacity 속성을 이용하면 된다. 

 

 

 

3.TouchableWithoutFeedback

 

화면의 가장 위에서 일어나는 탭 이벤트를 listen 하는 것이다. 그래픽이나 다른 UI반응을 보여주지는 않는다.

UI,즉 애플리케이션의 생김새는 변하지 않는다. 이벤트는 listen하는 중이지만 변화는 없다. 

 

보통 애니메이션 반응을 유저에게 보여주고 싶지 않을 때 TouchableWithoutFeedback을 사용한다!

 

pressable

 

TouchableWithoutFeedback과 비슷한 면이 많지만 좀 더 새롭다. 

더 많은 설정을 줄 수 있다. 아마 TouchableOpacity가 사라지면 얘로 대체될 것이다.

앞서 본 Touchable이 가지는 이벤트 속성도 가지고 있다. 

delayLongPress라는 것도 가지고 있는데 n초 동안 누르는걸 설정할 수 있는것이다. 

또한 disabled도 가지고 있는데 이건 TouchableOpacity에는 없는 것이다.

 

그래도 원픽은 Touchable opacity!

 

++)hitSlope

 

요소 바깥 어디까지 탭 누르는 것을 감지할지 정하는 것이다. 

element를 굳이 크게 만들지 않아도 pressable을 사용하면 touchable 컴포넌트 주변을

눌러도 인식한다..!