javascript - 如何使用钩子(Hook)在 native react 中保存/下载生成二维码？

Question

我正在尝试使用 Hook 在 React Native 中构建应用程序生成器和扫描仪 QR 码。我想要一个解决方案来在生成二维码后将其保存/下载到设备中。我需要帮助，谢谢

react-native-qrcode-generator 谁能给我一些关于如何保存生成的二维码的建议？非常感谢任何帮助

Answer 1

如果要将二维码中的信息保存为二维码，则必须将二维码转换为png图片，然后将其作为图片存储到数据库中。

因此，我建议您做的是，在保存时，将信息作为字符串(或任何必要的)存储在数据库中。下载时，只需从您的数据库中检索信息并立即生成 QR 码。 它不会消耗更长的时间。生成二维码后显示。

我认为这是最适合您的解决方案。

您可能需要 react-native-qrcode-generator 来生成二维码。

这是一个示例代码...

您可以输入key 和value(在顶部输入)，然后按“保存”按钮。当按下“保存”按钮时，您必须将键值对(数据)存储到数据库中。

然后，输入您要下载的键(在底部输入)，然后按“下载”按钮。然后您必须检索与给定键关联的数据(值)。

状态值是在从数据库中成功检索到值后设置的。该状态作为 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
  },
});

这是一个演示...

请仔细检查一下，如果您还有其他问题，请随时问我。祝你好运!