Загрузка react native qrcode skia - Загрузка исходного кода react native qrcode skia

react native qrcode skia

Другой исходный код

Release 0.3.0

Скачать

React Native QRCode Skia?

Легкий и высокопроизводительный компонент генератора QR-кода для React Native, работающий на базе механизма рендеринга Skia.

Создайте свой QR-код менее чем за 30 секунд, используя qrcode.reactiive.io.

демо-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 — это, по сути, лыжная трасса. Это означает, что настройка проста с использованием реквизита «дети». Вот пример:

 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 (число, необязательно) — процент StrokeWidth (от 0 до 1). Значение по умолчанию — 1.
children (React.ReactNode, необязательно) — дочерние компоненты, отображаемые в контейнере QRCode.
pathStyle ('fill' | 'stroke', необязательно) — стиль пути QRCode: 'fill' или 'stroke'. Значение по умолчанию — «обводка».
padding (число, необязательно) — отступ, применяемый вокруг QRCode. Значение по умолчанию — 0.
size (число) — Размер QRCode.
shapeOptions (ShapeOptions, необязательно) — параметры формы для пути QRCode. Значение по умолчанию — {}. Параметры формы включают в себя:
- shape (BaseShapeOptions, необязательно) — форма элементов QR-кода. Может быть «квадрат», «круг», «закругленный», «ромб», «треугольник» или «звезда». По умолчанию «округлено».
- eyePatternShape (BaseShapeOptions, необязательно) — форма узора глаз. Может быть «квадрат», «круг», «закругленный», «ромб», «треугольник» или «звезда». По умолчанию «округлено».
- gap (число, необязательно) — Промежуток между элементами QR-кода. По умолчанию — 0.
- eyePatternGap (число, необязательно) — разрыв в узорах глаз. По умолчанию — 0.
logoAreaSize (число, необязательно) — размер области логотипа внутри QRCode.
logo (React.ReactNode, необязательно) — компонент логотипа, который будет отображаться в QRCode.

Хотите поддержать меня?

Если вам нравится мое творчество и вы хотите меня поддержать, проще всего подписаться на мой канал на YouTube. Это кажется простой задачей, но для меня это очень много значит.

Другие способы поддержать меня и получить эксклюзивный контент:

Мой курс (Reanimate.dev): Вы действительно увлекаетесь анимацией? Фантастика! Нас становится двое. Здесь вы можете получить доступ к моему курсу по анимации React Native и узнать, как улучшить свои навыки анимации.
Patreon: Каждую неделю, вот уже несколько лет, я делюсь со своими покровителями новой специальной анимацией. Если вы хотите получить доступ ко всем из них, вы можете стать покровителем.