• 0

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

هدا هو الخطأ 

 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,
  },
});

 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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

1 شخص أعجب بهذا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ منذ ساعة مضت قال Wael Aljamal:

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

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

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

1 شخص أعجب بهذا

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


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن