React本机内置qrcode生成器不工作

Question

我正在开发一个使用react原生的移动应用程序，它使用react原生内置库(react-native-qrcode-svg)来生成二维码。生成的二维码在扫描时没有给出正确的输出，但当我在二维码生成器网站上使用相同的数据生成二维码时，它工作正常。

数据：

0x0000000000000000000000000000000000000000000000000000000000000012z0x0000000000000000000000000000000000000000000000000000000000000041z0x0000000000000000000000000000000000000000000000000000000000000016z0x00000000000000000000000000000000000000000000000000000000000224b8z0x00000000000000000000000000000000000000000000000000000000002f27d0z0x091ae4f84eca31b5d4c45ce56ac1893b466242f41ebd5a6632709718effc79a7z0x145a26f968e8a0d3669176dadf5b7896e85da841cf68c8e670af27a242276b46z0x22700e11d34f6223378c6e8a74cf8f2836fb98980ece548e0321796315457e30z0x010e24bcb2d6a3dd3bfbe32e14d742b038571ec8a56e9a1c0126a2bd3c29d9d9z0x1508d82518e3d428351b92ae41ee908d00d251cede39b64cb83d7fbe048b21dbz0x1347fa7b1285742c16cbd0fd9b5df6c5c125b3706d32830d8ec4656b72064d5bz0x180c283076cbc12063f4582a43f713ee6e04bb9d916d207ddd0be2696cdca4fcz0x1dab845bdeccb66f4de39c24bdafa3eddd8265734259d98244faa962afef2709z0

Answer 1

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

import RNQRGenerator from 'rn-qr-generator';

componentDidMount() {
    RNQRGenerator.generate({
      value: 'otpauth://totp/Example:alice@google.com?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));
  }

Answer 2

    //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);

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} />;
};