우선 버튼에 피드백이 없으면 이게 버튼이 눌린건지 가만히 있는건지 잘 모를 수 있다.
그러니 버튼에 피드백을 줘서 버튼이 눌렸다는 것을 표시해줄 필요성이 있다.
function PrimaryButton({ children }) {
function pressHandler() {
console.log("pressed");
}
return (
<Pressable
onPress={pressHandler}
>
<View>
<Text style={styles.buttonText}>{children}</Text>
</View>
</Pressable>
);
}
export default PrimaryButton;
기본적인 버튼 모양이다.
당연하게도 눌렸을 때 아무런 반으이 없다.
이를 좀 예쁘게 개선해보고자 한다.
일단 눌리고 나발이고 먼저 커스텀을 해볼 것이다.
상위 컴포넌트는 무시하고 현재의 버튼 컴포넌트만 보도록 하자
function PrimaryButton({ children }) {
function pressHandler() {
console.log("pressed");
}
return (
<View style={styles.buttonOuterContainer}>
<Pressable
style={({ pressed }) =>
pressed
? [styles.buttonInnerContainer, styles.pressed]
: styles.buttonInnerContainer
}
onPress={pressHandler}
android_ripple={{ color: "#cdcd32" }}
>
<Text style={styles.buttonText}>{children}</Text>
</Pressable>
</View>
}
export default PrimaryButton;
const styles=styleSheet.create({
buttonOuterContainer: {
borderRadius: 28,
margin: 4,
overflow: "hidden",
},
buttonInnerContainer: {
backgroundColor: "#72063c",
paddingVertical: 8,
paddingHorizontal: 16,
elevation: 2,
},
buttonText: {
color: "white",
textAlign: "center",
},
pressed: {
opacity: 0.75,
},
})
View
컨테이너와 Pressable
컴포넌트의 위치를 변경한 이유는 눌렸을 때 그림자 효과가 밖으로 빠져나오기 때문이다.
우선 안드로이드와 IOS가 다르게 동작한다.
안드로이드의 경우
android_ripple={{ color: "#cdcd32" }}
로 줘서 클릭했을 경우 물결 효과를 줄 수 있다.
매우 쉬움
IOS의 경우 조금 복잡하다.
예전에 style에는 함수나 조건을 줄 수 있다고 배웠다.
그래서
style={({ pressed }) => pressed ? [styles.buttonInnerContainer, styles.pressed] : styles.buttonInnerContainer }
를 주었다.
여기서 pressed
는 기본 제공하는 프로퍼티로 Pressable
이 눌렸는지 안눌렸는지 확인 할 수 있다.
이제 Pressable
이 눌렸을 경우 즉 pressed
가 넘어왔을 경우에 삼항연산자로 조건을 줘서 pressed
가 되었을 경우 []
로 style
객체를 집어넣어 줬다.
IOS에서 버튼에 피드백을 주는 방법이다.