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

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

&nbsp; &nbsp; //This is the code&nbsp;&nbsp; &nbsp; import React, { Component } from 'react';&nbsp; &nbsp; import { Platform, StyleSheet, View, TextInput,Button, Image, Dimensions,ImageBackground, Text, TouchableOpacity } from 'react-native';&nbsp; &nbsp; import { createAppContainer } from 'react-navigation';&nbsp; &nbsp; import { createStackNavigator } from 'react-navigation-stack';&nbsp; &nbsp; import { Buffer } from 'buffer';&nbsp; &nbsp; import QRCode from 'react-native-qrcode-svg';&nbsp; &nbsp; class qrDisplay extends Component{&nbsp; &nbsp; &nbsp; constructor(){&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.state={&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;render(){this.setState({proof:'0x0000000000000000000000000000000000000000000000000000000000000012z0x0000000000000000000000000000000000000000000000000000000000000041z0x0000000000000000000000000000000000000000000000000000000000000016z0x00000000000000000000000000000000000000000000000000000000000224b8z0x00000000000000000000000000000000000000000000000000000000002f27d0z0x01bbf2c3abaf9b1946cc6b5b199fd2cbc35ab059a53b7e986f3eab498ab6696az0x3011b16aa9a9ef1a096ddbb3d49a22191bf5309a6181e8ebbdac6d9468c64d36z0x19166accc2e39efbc939c14dc01182cc871905c6201b397680ad9cfac8105eadz0x147f7f3c3d01a4c3fe337761abe04d2c82c8d2a88b60ae6ecb0c32fe9988e926z0x293b1b75baff7688b39b725bace078f16df5d06a403f8ee248952e5dc721bdbfz0x0a9e10afbca5a473485c58021f9e84bfcaa463104158adfd4722c96ad06ec5d5z0x1dfada58ecf65b3e22b5bb5452ced64894d04fa2dfe3827911d7554f0b33f703z0x080e9e8c2ac5b8902903ac6e580eabdcd0c048b2ea27cdfcfa5434a753b61546z1'})&nbsp; &nbsp; &nbsp; &nbsp;return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YOUR QR CODE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <QRCode&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.proof}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size={350}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="purple"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp; const AppNavigator = createStackNavigator(&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; qrDisplay:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; screen:qrDisplay,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; navigationOptions:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header:null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; initialRouteName: 'qrDisplay',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; );&nbsp; &nbsp; export default createAppContainer(AppNavigator);

Answer 3

试试这个要点：https : //gist.github.com/marcelosalloum/14e827279e6bba1e0887c3c9f646c1aeimport React from "react";import styled from "styled-components";const QRCodeImage = styled.img<{ size: number }>`&nbsp; width: ${({ size }) => size};&nbsp; height: ${({ size }) => size};`;type Props = {&nbsp; value: string;&nbsp; size?: number;};export const QRCode = ({ value, size = 500 }: Props) => {&nbsp; const uri = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${value}`;&nbsp; return <QRCodeImage src={uri} size={size} />;};