Блог

Я сгенерировал QR-код вручную, попросив пользователя ввести значение, но я пытаюсь сгенерировать случайный QR-код (Qr должен быть сгенерирован из числа), не запрашивая ввода у пользователя, так как я могу сгенерировать случайный QR-код, нажав только кнопку? Я работаю над проектом, который требует случайного QR-кода каждый раз, когда они открывают свое мобильное приложение.

Вот мой код:

 import React, { Component } from "react";

import {
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  Text,
} from "react-native";

import QRCode from "react-native-qrcode-svg";

class QrGenerator extends Component {
  
  constructor() {
    super();
    this.state = {
      // Default Value of the TextInput
      inputValue: "",

      // Default value for the QR Code
      valueForQRCode: "",
    };
  }

  getTextInputValue = () => {
    this.setState({
      valueForQRCode: this.state.inputValue,
    });
  };

  render() {
    return (
      <View style={styles.MainContainer}>
        <QRCode
          //Setting the value of QRCode
          value={"ComputerGen"   this.state.valueForQRCode}

          //Size of QRCode
          size={250}

          //Background Color of QRCode
          bgColor="#000"

          //Front Color of QRCode
          fgColor="#fff"

          getRef={(ref) => (this.svg = ref)}
          onPress={() => {}}
        />
        <TextInput  // Input to get the value to set on QRCode
          style={styles.TextInputStyle}
          onChangeText={(text) => this.setState({ inputValue: text })}
          underlineColorAndroid="transparent"
          placeholder="Enter text to Generate QR Code"
        />

        <TouchableOpacity
          onPress={this.getTextInputValue}
          activeOpacity={0.7}
          style={styles.button}
        >
          <Text style={styles.TextStyle}> Generate QR Code </Text>
        </TouchableOpacity>
      </View>
    );
  }
}
export default QrGenerator;
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    margin: 10,
    alignItems: "center",
    paddingTop: 40,
  },

  TextInputStyle: {
    width: "100%",
    height: 40,
    marginTop: 20,
    borderWidth: 1,
    textAlign: "center",
  },

  button: {
    width: "100%",
    paddingTop: 8,
    marginTop: 10,
    paddingBottom: 8,
    backgroundColor: "#F44336",
    marginBottom: 20,
  },

  TextStyle: {
    color: "#fff",
    textAlign: "center",
    fontSize: 18,
  },
});
  

Что вы хотите сделать, это создать случайную строку «inputValue», если она пуста.

 getTextInputValue = () => {
    if (this.state.inputValue.length === 0) {
        const randomInputValue = Math.random().toString(36).slice(2)   Math.random().toString(36).slice(2);
        this.setState({
            valueForQRCode: randomInputValue,
            inputValue: randomInputValue,
        });
    } else {
        this.setState({
            valueForQRCode: this.state.inputValue,
        });
    }
};