1
votes

Comment générer un code QR avec plusieurs valeurs telles que le nom, l'e-mail, etc. dans React Native

Je suis capable de créer un code QR avec une valeur unique en utilisant le package react-native-qrcode-svg . Mais impossible d'ajouter plusieurs valeurs comme nom, email, etc.

J'ai essayé ceux-ci:

Packages:

npm install react-native-svg --save
lien react-natif react-native-svg
npm install react-native-qrcode-svg --save

Code pour générer un code QR en utilisant une valeur unique.

import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';

export default class App extends React.Component {
 render() {
  return (
    <QRCode
      value="Here I want to add name, email,etc"
    />
  );
 };
}

Je veux générer quelque chose comme ça

javascript reactjs react-native svg

1 commentaires

Quels sont vos besoins? QRcode est comme une chaîne dans un autre style, pourquoi voulez-vous ajouter beaucoup de choses dans un QRcode? Si vous en avez vraiment besoin, je peux vous recommander de saisir comme un objet ou une chaîne de style JSON, qui vous permet de l'analyser plus facilement?

3 Réponses :

0
votes

Je n'ai jamais utilisé react, mais cela ne devrait pas être quelque chose comme

value={`"name={name},email={email},phone={phone}"`}

assez pour calculer la valeur?

0 commentaires

0
votes

D'après la documentation ici, https://www.npmjs.com / package / react-native-qrcode-svg , la valeur peut être un tableau:

Chaîne Valeur du code QR. Peut également accepter un tableau de segments tel que défini en mode Manuel. Ex. [{data: 'ABCDEFG', mode: 'alphanumeric'}, {data: '0123456', mode: 'numeric'}, {data: [253,254,255], mode: 'byte'}] p >

Par conséquent, le code doit être

import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';

export default class App extends React.Component {
 render() {
  return (
    <QRCode
      value="[{ name: 'my name'},{ email: 'email@email.com' }]"
    />
  );
 };
}

2 commentaires

Cela donnera sous forme de chaîne, mais je veux générer quelque chose qui est similaire au code QR indiqué dans la question.

J'ai changé le code. Vérifiez une fois. Lisez également attentivement la documentation

1
votes

Vous pouvez utiliser le module rn-qr-generator pour créer une image QRCode avec une chaîne donnée. Pour générer une image QRCode avec un objet, faites simplement quelque chose comme ceci

import RNQRGenerator from 'rn-qr-generator';
 
RNQRGenerator.generate({
  value: JSON.stringify({ email: 'some.email.com', name: 'Name' })
  height: 100,
  width: 100,
  base64: false,            // default 'false'
  backgroundColor: 'black', // default 'white'
  color: 'white',           // default 'black'
})
  .then(response => {
    const { uri, width, height, base64 } = response;
    this.setState({ imageUri: uri });
  })
  .catch(error => console.log('Cannot create QR code', error));

0 commentaires