inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tạo ứng dụng cộng đồng avatar (React Native Expo)

[3-0] Triển khai component button chung

CustomButton 코드 버튼 관련 질문

63

yeong

6 câu hỏi đã được viết

0

버전 차이 (RN StyleSheet, Expo)의 문제거나 안드로이드의 문제인지는 모르겠지만 강의 중 코드로 작성하면 아래와 같은 문제가 나옵니다.

screenshot.png

Pressable과 Text에 backgroundColor와 color가 스타일링이 되는 방식이나 Button 요소에 opacity가 적용이 되지 않는 듯한 이슈인 것 같아서 아래와 같이 해결했습니다.

 

return (
  <Pressable
    style={({ pressed }) => [
      styles.container,
      styles[size],
      { backgroundColor: styles[variant].backgroundColor },
      pressed && styles.pressed,
    ]}
    {...props}
  >
    <Text style={[styles.text, { color: styles[variant].color }]}>
      {label}
    </Text>
  </Pressable>
);

...

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 14,
    fontWeight: "bold",
  },
  // size
  large: {
    width: "100%",
    height: 44,
  },
  medium: {},
  // variant
  filled: {
    backgroundColor: colors.ORANGE_600,
    color: colors.WHITE,
  },
  // Pressable props
  pressed: {
    opacity: 0.8,
  },
});

저는 강의 코드 대신 이렇게 해서 해결은 되었는데 혹시 이 이슈가 일어나는 이유와 앞으로 코드 복잡도가 어떻게 될 지는 모르겠지만 CustomButton이 그렇게 복잡해지진 않을 것 같은데 방법이 최선일지, 아니면 더 개선할 점이 있는지 궁금합니다.

react-native typescript expo react-hook-form react-query

Câu trả lời 1

0

Kyo

pressable에는 백그라운드, text에는 컬러만 적용되도록 해주셨네요. 좋은방법인것 같습니다👍

secureTextEntry 설정에 관해

0

55

2

expo 55 tabs 사라짐 이슈

0

76

2

백엔드도 궁금합니다!

1

84

1

댓글 버튼 하단에 고정되지 않는 이슈

0

50

1

SafeAreaView 적용 기준 문의

0

80

2

스크린 옵션 아이콘

0

55

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

65

2

ActionSheet

0

84

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

98

1

iOS 빌드 후 실기기에서 앱 시작

1

68

1

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

0

80

2

클라이언트 사이드에서 세션 관련 질문

0

80

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

111

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

62

1

Expo 54 버전 ios에서 headerLeft

1

139

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

78

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

91

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

148

2

강의는 52버전인데 expo가 현재 54버전이에요

0

305

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

232

2

키보드 이슈 관련 해결 질문

0

72

1

android header를 ios처럼 바꾸기

0

65

1

ios 시뮬로 보다가 android 시뮬로 넘어갈려니깐 오류가 생겨요

0

103

2