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

كيف يمكننى حل هذا الخطأ. ERROR Warning: Failed prop type: Invalid props.style key `resizeMode` supplied to `Text`.

أحمد عبد الله2

السؤال

هدا هو الخطأ 

 ERROR  Warning: Failed prop type: Invalid props.style key `resizeMode` supplied to `Text`.

 

هدا هو الكود 

import React, {useState} from 'react';
import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Feather';
import Picker from 'react-native-image-crop-picker';

import SafeView from '../../components/shared/SafeView';
import LongButton from '../../components/buttons/LongButton';
import NavigationHeader from '../../components/shared/NavigationHeader';
import BasicInput from '../../components/textInputs/BasicInput';
import {phoneHeight, phoneWidth} from '../../theme/Dimensions';
import {MyColors} from '../../theme/MyColos';
import {MyFonts} from '../../theme/MyFonts';
import MainTabs from '../../navigation/MainTabs';

export default function UpdateProfileScreen({route}: any) {
  const navigation = useNavigation();
  const item = route.params;
  const [userImage, setUserImage] = useState(item.image);
  const [canEditName, setCanEditName] = useState(false);
  const [canEditPhone, setCanEditPhone] = useState(false);
  const [canEditEmail, setCanEditEmail] = useState(false);

  const openGallery = () => {
    Picker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then(image => {
      console.log(image);
      setUserImage(image.path);
    });
  };

  return (
    <>
      <SafeView style={styles.container}>
        <NavigationHeader
          title="تعديل بيانات الحساب"
          onBackPress={() => navigation.goBack()}
        />
        <View>
          <Image source={{uri: userImage}} style={styles.userImage} />
          <TouchableOpacity
            style={styles.cameraContainer}
            onPress={openGallery}>
            <Icon name="camera" size={phoneHeight * 0.03} color="white" />
          </TouchableOpacity>
        </View>

        <Text style={styles.inputLabel}>اسم المستخدم</Text>
        <BasicInput
          hasIcon
          defaultValue={item.name}
          iconName="edit"
          iconColor={canEditName ? MyColors.darkAqua : MyColors.gray}
          editable={canEditName}
          onPress={() => setCanEditName(!canEditName)}
        />

        <Text style={styles.inputLabel}>رقم الجوال</Text>
        <BasicInput
          hasIcon
          defaultValue={item.phone}
          iconName="edit"
          iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray}
          editable={canEditPhone}
          onPress={() => setCanEditPhone(!canEditPhone)}
        />

        <Text style={styles.inputLabel}>البريد الإلكترونى</Text>
        <BasicInput
          hasIcon
          defaultValue={item.email}
          iconName="edit"
          iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray}
          editable={canEditEmail}
          onPress={() => setCanEditEmail(!canEditEmail)}
        />
        <Text
          onPress={() => navigation.navigate('UpdatePassword')}
          style={styles.forgetPassword}>
          تعديل كلمة المرور
        </Text>

        <LongButton
          style={styles.button}
          title="حفظ التغييرات"
          onPress={() => console.log('Save')}
        />
        <MainTabs />
      </SafeView>
      {/* <Tabs profileSelected /> */}
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  inputLabel: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkBlue,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  forgetPassword: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkAqua,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  button: {
    marginTop: 50,
  },
  cameraContainer: {
    height: phoneHeight * 0.06,
    width: phoneHeight * 0.06,
    zIndex: 1,
    position: 'relative',
    bottom: phoneHeight * 0.06,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: MyColors.darkAqua,
    borderRadius: phoneHeight * 0.03,
  },
  userImage: {
    height: phoneHeight * 0.2,
    width: phoneHeight * 0.2,
    borderRadius: phoneHeight * 0.1,
  },
});

 

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

Recommended Posts

  • 1

أحد مكونات العرض يستخدم الخاصية resizeMode لعنصر Text حاول حذفها. أو انقلها من styles إلى imageStyle prop مباشرة

كمثال:

class CoolBackgroundImage extends Component {
  render() {
    <ImageBackground
      source={{uri: 'link-to-image'}}
      imageStyle={{resizeMode: 'stretch'}}    /// هنا
      style={Style.someAdditionalViewStyles}
    >
      <View style={Style.container}>
        <Text>This is a child of the ImageBackground!</Text>
      </View>
    </ImageBackground>
  }
}

 

هذا التعديل أصبح مطلوب بعد اتحديث عن إصدار 0.48

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

  • 0
بتاريخ منذ ساعة مضت قال Wael Aljamal:

أحد مكونات العرض يستخدم الخاصية resizeMode لعنصر Text حاول حذفها. أو انقلها من styles إلى imageStyle prop مباشرة

هذا التعديل أصبح مطلوب بعد اتحديث عن إصدار 0.48

شكرا جزيلا .. قمت بحلها لاننى كنت اعطى ايقونة هده الخاصية 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...