React Native内置的二维码生成器不起作用。

Question

我正在使用React Native开发一个移动应用，其中使用了React Native内置库(react-native-qrcode-svg)来生成二维码。然而，在扫描生成的二维码时，它没有正确的输出。但是，当我使用同样的数据在二维码生成网站上生成二维码时，它可以正常工作。

数据：

0x0000000000000000000000000000000000000000000000000000000000000012z0x0000000000000000000000000000000000000000000000000000000000000041z0x0000000000000000000000000000000000000000000000000000000000000016z0x00000000000000000000000000000000000000000000000000000000000224b8z0x00000000000000000000000000000000000000000000000000000000002f27d0z0x091ae4f84eca31b5d4c45ce56ac1893b466242f41ebd5a6632709718effc79a7z0x145a26f968e8a0d3669176dadf5b7896e85da841cf68c8e670af27a242276b46z0x22700e11d34f6223378c6e8a74cf8f2836fb98980ece548e0321796315457e30z0x010e24bcb2d6a3dd3bfbe32e14d742b038571ec8a56e9a1c0126a2bd3c29d9d9z0x1508d82518e3d428351b92ae41ee908d00d251cede39b64cb83d7fbe048b21dbz0x1347fa7b1285742c16cbd0fd9b5df6c5c125b3706d32830d8ec4656b72064d5bz0x180c283076cbc12063f4582a43f713ee6e04bb9d916d207ddd0be2696cdca4fcz0x1dab845bdeccb66f4de39c24bdafa3eddd8265734259d98244faa962afef2709z0

- shubham gupta

---

嘿，你用的是哪个版本的react-native-qr-code-svg？我正在使用5.2.0版本，它运行得非常好！ - FreakyCoder

我正在使用5.3.2版本。 - shubham gupta

你能试试5.2.0版本吗？也许更新的版本有一些bug。 - FreakyCoder

我刚刚尝试了一下，它不起作用。 - shubham gupta

你能分享一个可复现的代码吗？ - FreakyCoder

我已经在答案中添加了以下代码。 - shubham gupta

Answer 1

你可以尝试使用rn-qr-generator模块(https://www.npmjs.com/package/rn-qr-generator)。你需要将value传递给该库，它会返回生成的QR码的uri和base64数据。

import RNQRGenerator from 'rn-qr-generator';

componentDidMount() {
    RNQRGenerator.generate({
      value: 'otpauth://totp/Example:[e-mail]?secret=JBSWY3DPEHPK3PXP&issuer=Example', // required
      height: 300,
      width: 300,
      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));
  }

- Gev

Answer 2

如果您正在使用expo，那么普通的QR码生成库将无法使用，例如：

• react-native-qrcode-generator
• react-native-qr-generator

相反，您需要使用：

• react-native-circle-qrcode-svg

安装

$ npm install --save react-native-svg react-native-qrcode-svg

实现

您可以像这样实现QR码：

import React from 'react'
import { View } from 'react-native'
import SvgQRCode from 'react-native-qrcode-svg'

const App = () => {
  return (
    <View>
      <SvgQRCode value="hello world" size={100} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

export default App

结果

Expo Snacks 上提供了一个交互式演示： https://snack.expo.dev/@backupbrain/svg-qr-code-generator

配置选项，包括颜色和大小，可以在 react-native-circle-qrcode-svg NPM 页面上找到。

- Adonis Gaitatzis

---

无法在EAS上运行。总是出现错误。 - NewUser134

Answer 3

试试这个代码片段：https://gist.github.com/marcelosalloum/14e827279e6bba1e0887c3c9f646c1ae

import React from "react";
import styled from "styled-components";

const QRCodeImage = styled.img<{ size: number }>`
  width: ${({ size }) => size};
  height: ${({ size }) => size};
`;

type Props = {
  value: string;
  size?: number;
};

export const QRCode = ({ value, size = 500 }: Props) => {
  const uri = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${value}`;
  return <QRCodeImage src={uri} size={size} />;
};

- marcelosalloum

Answer 4

    //This is the code 

    import React, { Component } from 'react';
    import { Platform, StyleSheet, View, TextInput,Button, Image, Dimensions,ImageBackground, Text, TouchableOpacity } from 'react-native';
    import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';
    import { Buffer } from 'buffer';
    import QRCode from 'react-native-qrcode-svg';

    class qrDisplay extends Component{
      constructor(){
        super();
        this.state={
        }
      }
     render(){
this.setState({proof:'0x0000000000000000000000000000000000000000000000000000000000000012z0x0000000000000000000000000000000000000000000000000000000000000041z0x0000000000000000000000000000000000000000000000000000000000000016z0x00000000000000000000000000000000000000000000000000000000000224b8z0x00000000000000000000000000000000000000000000000000000000002f27d0z0x01bbf2c3abaf9b1946cc6b5b199fd2cbc35ab059a53b7e986f3eab498ab6696az0x3011b16aa9a9ef1a096ddbb3d49a22191bf5309a6181e8ebbdac6d9468c64d36z0x19166accc2e39efbc939c14dc01182cc871905c6201b397680ad9cfac8105eadz0x147f7f3c3d01a4c3fe337761abe04d2c82c8d2a88b60ae6ecb0c32fe9988e926z0x293b1b75baff7688b39b725bace078f16df5d06a403f8ee248952e5dc721bdbfz0x0a9e10afbca5a473485c58021f9e84bfcaa463104158adfd4722c96ad06ec5d5z0x1dfada58ecf65b3e22b5bb5452ced64894d04fa2dfe3827911d7554f0b33f703z0x080e9e8c2ac5b8902903ac6e580eabdcd0c048b2ea27cdfcfa5434a753b61546z1'})
       return(
          <View>
            <Text>
              YOUR QR CODE
            </Text>
            <QRCode
              value={this.state.proof}
              size={350}
              color="purple"/>
          </View>
       );
     }
    }

    const AppNavigator = createStackNavigator(
      {
        qrDisplay:{
          screen:qrDisplay,
          navigationOptions:{
            header:null,
          }
        }
      },
      {
        initialRouteName: 'qrDisplay',
      },
    );

    export default createAppContainer(AppNavigator);

- shubham gupta

---

您不能使用this.state.proof =来设置状态。请改用：this.setState({proof: "your-data"});此外，您可以将其设置为构造函数的默认值。 - FreakyCoder

是的，我编辑过了，问题不在二维码生成上。当我用二维码扫描器扫描这个二维码时，它无法扫描。 - shubham gupta

嗨，@shubham gupta， 我已经尝试过了。实际上，它可以工作，但是你的字符串值太长了。这就是为什么QRScanner无法读取它的原因。请使用值："Test"，它会起作用的。您应该找到另一种加密此数据的方法。您不能使用QRCode来处理这个长字符串值。 - FreakyCoder