تضمين qrcode

Mohamed Lamin Mahmoudi · 31 مايو 2022

عندما أريد أن أستعمل المكون Qrcode تظهر هذه الاخطاء

import React ,{useState, Component} from 'react';
import {View,Text,StyleSheet,ScrollView,KeyboardAvoidingView,TextInput,TouchableOpacity} from 'react-native';
import List from './compononts/list';
import Loader from './compononts/Loader';
import Inbut from './compononts/Inbut';
import { Entypo } from '@expo/vector-icons';
import ScreenTitle from './compononts/ScreenTitle';


import QRCode from "react-qr-code";


function AddRoom(){
  
  const [formData, setFormData]=useState({
    NameOfroom:'',
    NumberOfroom: '',
    date:'',
    QrCode:''
    });
    const changeFormValue=(key,value)=>{
      setFormData({...formData,[key]:value});
      
  }
  
    const { NameOfroom,  NumberOfroom, date,QrCode}=formData;
  return(
  <ScrollView  contentContainerStyle={{paddingVertical:20}} >
        
          <View style={styles.container}>
           <View style={styles.titlescreen}>
           <ScreenTitle title="أضف حصة " ></ScreenTitle>           
         <Entypo name="add-to-list" size={70} color="black" style={styles.icontitle} />
           </View>      
          </View>
          <KeyboardAvoidingView   behavior='padding' enabled>
            <View  style={styles.styInbut}>

            <Inbut
          placeholder="إسم الحصة " 
         value={NameOfroom} 
         onChangeText={(text)=>changeFormValue('NameOfroom',text)}
         />
         <Inbut
          placeholder="رقم الحصة " 
         value={NumberOfroom} 
         onChangeText={(text)=>changeFormValue('NumberOfroom',text)}
         />
          <Inbut
          placeholder="تاريخ الحصة " 
         value={date} 
         onChangeText={(text)=>changeFormValue('date',text)}
         />
       
              <View style={styles.Qrcodestyl}>
               <TextInput
                style={styles.TextInputStyle}
                value={QrCode}
                onChangeText={(text) => changeFormValue('Qrcode',text)}
                underlineColorAndroid = "transparent" 
                placeholder="Enter URL to Generate QR Code"
              />
              <TouchableOpacity onPress={QrCode} activeOpacity={0.7} style={styles.button} >
        
              <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text>
      
              </TouchableOpacity>
//هنا الخطأ
              <QRCode></QRCode> 
             
    
              </View>

            </View>
          </KeyboardAvoidingView>
           
  </ScrollView>
  )
};

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

    },
    titlescreen:{
position:'relative',
top:-40
    },
    icontitle:{
      position:'relative',
      right:-25,
      top:-20
    },
    styInbut:{
  position:'relative',
  left:45,
  top:-40
    },
    textcont:{
    fontSize:25,
    position:'relative',
    left:90,
    bottom:-5,
    },
    Qrcodestyl:{
      position:'relative',
      left:50
    },
    TextInputStyle:{
      position:'relative',
      left:-60,
      width: '80%',
    height: 50,
    borderRadius: 10,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: 'blue',
    textAlign: 'center'
    },
    button: {
     position:'relative',
     right:60,
     height:50,
     width: '80%',
      paddingTop:8,
      paddingBottom:8,
      backgroundColor: '#009688',
      borderRadius:7,
      marginBottom: 20
    },
    TextStyle:{
      color:'#fff',
      textAlign:'center',
      fontSize: 18
  }
})

export default AddRoom;

عمر قره محمد · 31 مايو 2022

يبدو لي ان المشكلة هي انك تقوم بتعريف المتغير QRCode في الموضع :

بتاريخ 7 ساعات قال Mohamed Lamin Mahmoudi:

const { NameOfroom, NumberOfroom, date,QrCode}=formData

بعد ان كان معرف بالفعل من قبل :

بتاريخ 7 ساعات قال Mohamed Lamin Mahmoudi:

import QRCode from "react-qr-code"

كما اظن انك لست بحاجة للسطر

const { NameOfroom,  NumberOfroom, date,QrCode}=formData;

حيث يمكن الوصول لهذه المتغيرات من خلال الـ

formData.QRCode 
formData.NameOfroom
formData.NumberOfroom
formData.date

كما ان العنصر QRcode يحتاج ل value :

<QRCode value="hey" />

Mohamed Lamin Mahmoudi · 31 مايو 2022

بتاريخ 47 دقائق مضت قال عمر قره محمد:
يبدو لي ان المشكلة هي انك تقوم بتعريف المتغير QRCode في الموضع :

بعد ان كان معرف بالفعل من قبل :

كما اظن انك لست بحاجة للسطر
const { NameOfroom,  NumberOfroom, date,QrCode}=formData;
حيث يمكن الوصول لهذه المتغيرات من خلال الـ
formData.QRCode 
formData.NameOfroom
formData.NumberOfroom
formData.date
كما ان العنصر QRcode يحتاج ل value :
<QRCode value="hey" />

   <TouchableOpacity onPress={formData.QRCode} activeOpacity={0.7} style={styles.button} >
        
              <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text>
      
              </TouchableOpacity>
                              //هنا
               <QRCode value={this.formData.QRCode}
                size={250}
                bgColor='#000'
                fgColor='#fff'

               
               />

كيف أمرر له القيمة بحيث عندما يتغير رابط الحصة وعند الضغط على الزر يتغير الكي أر كود؟

عمر قره محمد · 1 يونيو 2022

بتاريخ 10 ساعات قال Mohamed Lamin Mahmoudi:


   <TouchableOpacity onPress={formData.QRCode} activeOpacity={0.7} style={styles.button} >
        
              <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text>
      
              </TouchableOpacity>
                              //هنا
               <QRCode value={this.formData.QRCode}
                size={250}
                bgColor='#000'
                fgColor='#fff'

               
               />

كيف أمرر له القيمة بحيث عندما يتغير رابط الحصة وعند الضغط على الزر يتغير الكي أر كود؟

في الكود الخاص بك سيتم تحديث الـ

 <QRCode value={this.formData.QRCode}
                size={250}
                bgColor='#000'
                fgColor='#fff'
         />

عند اي تغيير في قيمة الـ

this.formData.QRCode

إذا كنت لا تريد ان يتم التحديث بشكل تلقائي يجب إضافة متغير جديد وتحديث الـ </ QRcode> فقط عند الضغط على الزر ثم عمل refresh للصفحة :

// نضيف العنصر التالي
let _QRcode = "";
function AddRoom() {
  const [formData, setFormData] = useState({
    NameOfroom: "",
    NumberOfroom: "",
    date: "",
    QrCode: "",
  });
  const changeFormValue = (key, value) => {
    setFormData({ ...formData, [key]: value });
  };
//  نقوم بعمل الوظيفة الخاصة بالتحديث
  const [refresh, setRefresh] = useState(0);

//    لا بأس من استخدام هذه الطريقة حيث انها ليست من تسبب المشكلة
  const { NameOfroom, NumberOfroom, date, QrCode } = formData;
  return (
    <ScrollView contentContainerStyle={{ paddingVertical: 20 }}>
      <View style={styles.container}>
        <View style={styles.titlescreen}>
          <ScreenTitle title='أضف حصة '></ScreenTitle>
          <Entypo
            name='add-to-list'
            size={70}
            color='black'
            style={styles.icontitle}
          />
        </View>
      </View>
      <KeyboardAvoidingView behavior='padding' enabled>
        <View style={styles.styInbut}>
          <Inbut
            placeholder='إسم الحصة '
            value={NameOfroom}
            onChangeText={(text) => changeFormValue("NameOfroom", text)}
          />
          <Inbut
            placeholder='رقم الحصة '
            value={NumberOfroom}
            onChangeText={(text) => changeFormValue("NumberOfroom", text)}
          />
          <Inbut
            placeholder='تاريخ الحصة '
            value={date}
            onChangeText={(text) => changeFormValue("date", text)}
          />

          <View style={styles.Qrcodestyl}>
            <TextInput
              style={styles.TextInputStyle}
              value={QrCode}
              onChangeText={(text) => changeFormValue("Qrcode", text)}
              underlineColorAndroid='transparent'
              placeholder='Enter URL to Generate QR Code'
            />
            <TouchableOpacity
            // نقوم بتغير قيمت المتغيير الذي عرفناه في الاعلى ثم تحديث الصفحة
              onPress={() => {
                _QRcode = QrCode;
                setRefresh(refresh + 1);
              }}
              activeOpacity={0.7}
              style={styles.button}
            >
              <Text style={styles.TextStyle}>
                Click Here To Generate QR Code
              </Text>
            </TouchableOpacity>
            {/*QRCode نقوم بوضع المتغير الذي عرفناه كقيمة للـ  */}
            <QRCode value={_QRcode} size={250} bgColor='#000' fgColor='#fff' />
          </View>
        </View>
      </KeyboardAvoidingView>
    </ScrollView>
  );
}

تضمين qrcode

السؤال

Mohamed Lamin Mahmoudi

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohamed Lamin Mahmoudi

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية