react native qrcode skia 다운로드 - react native qrcode skia 소스 코드 다운로드

react native qrcode skia

기타 소스코드

Release 0.3.0

다운로드

네이티브 QRCode Skia에 반응합니까?

Skia 렌더링 엔진으로 구동되는 React Native용 경량의 고성능 QR 코드 생성기 구성 요소입니다.

qrcode.reactiive.io를 사용하여 30초 이내에 QR 코드를 생성하세요.

데모-qrcode-x.mp4

설치

패키지를 설치하기 전에 RN Skia가 설치되어 있는지 확인하세요.

yarn add @shopify/react-native-skia

그런 다음 패키지를 설치할 수 있습니다.

yarn add react-native-qrcode-skia

용법

앱에 매우 간단한 QRCode 구성 요소가 필요할 수 있으며 기본 소품(값 및 크기)을 사용하여 이를 달성할 수 있습니다. 예는 다음과 같습니다.

 import QRCode from 'react-native-qrcode-skia' ;

const App = ( ) => {
  return (
    < QRCode
      value = "https://patreon.com/reactiive"
      size = { 200 }
    / >
  ) ;
} ;

export default App ;

내부적으로 QRCode는 본질적으로 Skia Path입니다. 이는 'children' 소품을 사용하여 사용자 정의가 간단하다는 것을 의미합니다. 예는 다음과 같습니다.

 import QRCode from 'react-native-qrcode-skia' ;

const App = ( ) => {
  return (
    < QRCode
      value = "https://patreon.com/reactiive"
      size = { 200 }
      shapeOptions = { {
        shape : "circle" ,
        eyePatternShape : "rounded" ,
        eyePatternGap : 0 ,
        gap : 0
      } }
      logoAreaSize = { 70 }
      logo = {
        < View style = { {
          height : 50 ,
          aspectRatio : 1 ,
          justifyContent : 'center' ,
          alignItems : 'center' ,
        } } >
          < Text style = { { fontSize : 38 } } > ? < / Text >
        < / View >
      }
    >
      < RadialGradient c = { { x : 100 , y : 100 } } r = { 100 } colors = { [ "#eeca3b" , "#ee3b83" ] } / >
    < / QRCode >
  ) ;
} ;

export default App ;

소품

value (문자열) - QRCode에 인코딩된 값입니다.
style (StyleProp, 선택 사항) - QRCode 컨테이너에 적용되는 스타일입니다.
errorCorrectionLevel (ErrorCorrectionLevelType, 선택 사항) - QRCode의 오류 수정 수준입니다. 레벨 L: 7%, 레벨 M: 15%, 레벨 Q: 25%, 레벨 H: 30%. 기본값은 'H'입니다.
color (문자열, 선택 사항) - QRCode 기본 경로의 색상입니다. 기본값은 '#000000'입니다.
strokeWidth (숫자, 선택 사항) - 스트로크 너비의 백분율(0~1)입니다. 기본값은 1입니다.
children (React.ReactNode, 선택 사항) - QRCode 컨테이너 내에서 렌더링되는 하위 구성 요소입니다.
pathStyle ('채우기' | '획', 선택 사항) - QRCode 경로의 스타일: '채우기' 또는 '획'. 기본값은 '스트로크'입니다.
padding (숫자, 선택) - QRCode 주위에 적용되는 패딩입니다. 기본값은 0입니다.
size (숫자) - QRCode의 크기입니다.
shapeOptions (ShapeOptions, option) - QRCode 경로의 모양 옵션입니다. 기본값은 {}입니다. 모양 옵션에는 다음이 포함됩니다.
- shape (BaseShapeOptions, 선택 사항) - QR 코드 요소의 모양입니다. '사각형', '원', '둥근', '다이아몬드', '삼각형' 또는 '별'일 수 있습니다. 기본값은 '반올림'입니다.
- eyePatternShape (BaseShapeOptions, 선택 사항) - 눈 패턴의 모양입니다. '사각형', '원', '둥근', '다이아몬드', '삼각형' 또는 '별'일 수 있습니다. 기본값은 '반올림'입니다.
- gap (숫자, 선택사항) - QR 코드 요소 사이의 간격입니다. 기본값은 0입니다.
- eyePatternGap (숫자, 선택 사항) - 눈 패턴의 간격입니다. 기본값은 0입니다.
logoAreaSize (숫자, 선택 사항) - QRCode 내 로고 영역의 크기입니다.
logo (React.ReactNode, 선택 사항) - QRCode 내에서 렌더링될 로고 구성 요소입니다.

나를 지지하고 싶나요?

내 작업이 마음에 들고 나를 지원하고 싶다면 가장 쉬운 방법은 내 YouTube 채널을 구독하는 것입니다. 이것은 쉬운 일처럼 보이지만 나에게는 많은 의미가 있습니다.

나를 지원하고 독점 콘텐츠를 얻는 다른 방법:

내 과정(Reanimate.dev): 정말 애니메이션을 좋아하시나요? 환상적입니다! 이것이 우리 둘을 만든다. 여기에서 내 React Native 애니메이션 코스에 액세스하여 애니메이션 기술을 향상시키는 방법을 배울 수 있습니다.
Patreon: 저는 몇 년 동안 매주 새로운 특별 애니메이션을 후원자들과 공유해 왔습니다. 이 모든 기능에 액세스하고 싶다면 후원자가 되실 수 있습니다.