Как сохранить / скачать сгенерировать QR-код в React Native с помощью хуков? - PullRequest
Новая
       41

Как сохранить / скачать сгенерировать QR-код в React Native с помощью хуков?

2 голосов
/ 28 мая 2020

Я пытаюсь создать генератор приложений и QR-код сканера в react native с помощью хуков. Мне нужно решение для сохранения / загрузки QR-кода в устройство после их создания. Мне нужна помощь, пожалуйста, спасибо

react-native-qrcode-generator Кто-нибудь может дать мне предложения о том, как сохранить этот сгенерированный QR-код? Любая помощь очень ценится

Ответы [ 2 ]

3 голосов
/ 28 мая 2020

Если вы хотите сохранить информацию в QR-коде как QR-код, вам необходимо преобразовать QR-код в изображение PNG, а затем сохранить его в своей базе данных как изображение.

Итак, что я советую вам сделать это, при сохранении просто сохранить информацию в виде строки (или как угодно) в базе данных. При загрузке просто получите информацию из своей базы данных и немедленно сгенерируйте QR-код. Это не займет больше времени. После создания QR-кода отобразите его.

Я думаю, что это наиболее подходящее решение для вас.

Вам может понадобиться react-native-qrcode-generator для создания QR-кода.

Вот пример кода ...

Вы можете ввести key и value (верхние поля ввода) и нажать кнопку «Сохранить». При нажатии кнопки «Сохранить» вы должны сохранить свою пару (данные) ключ-значение в своей базе данных.

Затем введите key (в нижнем поле ввода), из которого вы хотите загрузить и нажмите кнопку «Загрузить». Затем вы должны получить данные (значение), связанные с данным ключом.

Значение состояния устанавливается после того, как значение успешно извлечено из базы данных. Это состояние передается как prop компоненту QRCode. 

import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, AsyncStorage } from 'react-native';
import QRCode from 'react-native-qrcode-generator';

export default function App() {
  const [key, setKey] = useState(null);
  const [value, setValue] = useState(null);
  const [downloadKey, setDownloadKey] = useState(null);
  const [qrCodeValue, setQRCodeValue] = useState('');

  const save = async () => {
    //You have to implement the function that saves your information into your database.
    //Here I'm saving data to AsyncStorage. (For sample)

    await AsyncStorage.setItem(key, value);
  }

  const download = async () => {
    //You have to implement the function that retrieves your information from your database for given key.
    //Here I'm retrieving data from AsyncStorage. (For sample)

    const qrValue = await AsyncStorage.getItem(downloadKey);
    setQRCodeValue(qrValue);
  }

  return (
    <View style={styles.container}>

      <View style={styles.row}>
        <TextInput placeholder={'Key'} value={key} onChangeText={(key) => setKey(key)} style={styles.textInput}/>
        <TextInput placeholder={'Value'} value={value} onChangeText={(value) => setValue(value)} style={styles.textInput}/>
      </View>
      <TouchableOpacity style={{ flexDirection: 'row', marginBottom: 50 }} onPress={save}>
        <Text style={styles.button}>Save</Text>
      </TouchableOpacity>

      {qrCodeValue ? <QRCode value={qrCodeValue} size={200} /> : null}

      <Text style={{ margin: 10 }}>{qrCodeValue}</Text>

      <View style={[styles.row, { marginTop: 50 }]}>
        <TextInput placeholder={'Key'} value={downloadKey} onChangeText={(downloadKey) => setDownloadKey(downloadKey)} style={styles.textInput}/>
        <TouchableOpacity style={{ flex: 1, flexDirection: 'row' }} onPress={download}>
          <Text style={styles.button}>Download</Text>
        </TouchableOpacity>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 50,
    paddingBottom: 50
  },
  row: {
    flexDirection: 'row',
  },
  textInput: {
    flex: 1,
    borderColor: '#808080',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    paddingLeft: 5,
    paddingRight: 5,
  },
  button: {
    flex: 1,
    borderColor: '#0040FF',
    backgroundColor: '#0080FF',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    textAlign: 'center',
    textAlignVertical: 'center',
    height: 30
  },
});

Вот демонстрация ...

Demo

Пожалуйста go через это и не стесняйтесь спрашивать меня, если у вас возникнут другие проблемы. Удачи!

1 голос
/ 30 мая 2020

Если вы хотите сохранить QR-код как изображение на своем устройстве, вам следует преобразовать компонент просмотра QRcode в изображение png, а затем сохранить его.

Вы можете использовать react-native-view-shot для преобразования компонента QRcode view в изображение png и rn-fetch-blob для сохранения изображения в галерее.

...