反应本机内置二维码生成器不起作用

Question

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

Answer 1

您可以尝试rn-qr-generator模块（https://www.npmjs.com/package/rn-qr-generator）。您需要传递value给 lib，它会返回您uri和base64生成的 QRCode 的数据

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

  }

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

};