اذهب إلى المحتوى
  • 0

تضمين qrcode

Mohamed Lamin Mahmoudi

السؤال

 عندما أريد أن أستعمل  المكون 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;

 

Capture.PNG

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يبدو لي ان المشكلة هي انك تقوم بتعريف المتغير 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" />

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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'

               
               />

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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>
  );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...