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

السؤال

نشر

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...