iOS용 기본 조건부 버튼 스타일에 반응합니다.

React Native(RN)를 사용하면 플랫폼별 코드를 작성하는 대신 모바일 앱용 코드를 하나의 언어로 작성할 수 있습니다.

그러나 RN에는 플랫폼별 코드가 필요한 몇 가지 사항이 있습니다.

아래에는 사용자 지정 버튼 구성 요소가 있습니다. 지금 보고 있는 효과는 버튼을 눌렀을 때 색상이 변하는 것입니다 👆🏾.

RN은 이 효과에 사용할 수 있는 android_ripple라는 특수 속성을 제공합니다. 버튼을 누르면 ripple 속성이 버튼에 제공한 색상을 적용합니다.

확인 해봐!

    <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

그러나 이것은 Android 속성 👽이므로 iOS 기기에서는 작동하지 않으므로 이를 위해 일부 JS를 미세 조정해야 합니다.

구성 요소의 스타일 속성은 스타일 개체를 직접 가져오거나 화살표 함수를 사용할 수 있으므로 그 안에서 직접 일부 JS를 실행할 수 있습니다.

   <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }} //Android color change


        style={({ pressed }) => // iOS color change
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

여기 우리가 얻는 것이 있습니다.


Pressable 구성 요소는 자동으로 pressed 값(부울)을 함수에 전달한 다음 해당 부울을 삼항 연산자에서 사용할 수 있습니다.

이 삼항 연산자에서 배열의 여러 스타일 개체를 반환/추가할 수 있으므로 이 경우 스타일시트에서 하나의 '키'로 제한되지 않습니다. 여기서 기본 버튼 스타일과 버튼 누름 색상 변경을 모두 적용하고 있습니다.

"누르면 이 배열에서 두 스타일 개체를 모두 적용하고, 그렇지 않으면 단일 스타일만 적용합니다."라는 메시지가 표시됩니다.

짧지만 알아두면 좋은 소식, 건배 🥂

당신의 고민을 위한 강아지 ( source ):


Katya Ross의 표지 이미지