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

كيفية إصلاح مشكلة عدم عمل الخاصية borderStyle في React Native

علي العبدالله

السؤال

const styles = StyleSheet.create({
    item: {
        padding: 16,
        margin: 16,
        borderWidth: 1,
        borderStyle:"dashed",
        borderColor: "#ddd",
        borderRadius: 10,
  },
});

image.thumb.png.00050bde2ebb6af9fa9cce3084973de6.png

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الكود الذي لديك سليم ولا مشكلة به، يجب تعريف كامل خصائص Border مع بعضها لمقاربة مثل هاته النتيجة, وأنت تقوم بذلك. قد تكون المشكلة أنها لا تظهر بسبب أن borderWidth ضئيلة أو بسبب عدم التقاط التحديثات أساسا.

جرب تزويد قيمة boorderWith بأكثر وانظر ما ان حلت المشكلة. 

اجعلها 4 مثلا:

borderWidth: 4,

أيضا قد يكون هنالك مشكلة بعدم التقاط التحديثات من على Expo go في جهازك. جرب إعادة الإتصال.

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

  • 0

أولاً، تأكد من أنك تستخدم أحدث إصدار من React Native. تم إجراء بعض الإصلاحات على الخاصية borderStyle في الإصدارات الأخيرة.

ثانيًا، أضف خاصية borderRadius إلى كائن النمط الخاص بك، وهذا مطلوب لجعل الحدود المنقطة والمتقطعة تعمل على Android.

ثالثًا، تأكد من أنك تقوم بتعيين خاصية borderWidth،  فلن تعمل الخاصية borderStyle بدون خاصية borderWidth المحددة وحاول زيادة القيمة لرؤية هل تعمل أم لا.

رابعًا، جرب استخدام نمط حدود مختلف، فالحدود المنقطة والمتقطعة غير مدعومة على جميع المنصات، وإذا كنت تواجه مشكلة في جعلها تعمل، فحاول استخدام نمط حدود مختلف، مثل الصلب أو المتقطع.

إليك مثال على كائن نمط يجب أن يعمل للحدود المنقطة على كل من iOS و Android:

const styles = StyleSheet.create({
  item: {
    padding: 16,
    margin: 16,
    borderWidth: 2,
    borderStyle: "dashed",
    borderColor: "#ddd",
    borderRadius: 10,
  },
});

وتستطيع تفقد الخاصية من خلال المستند الرسمي للإصدار 0.72 وستجد أن الكود السابق يعمل حيث قمت بإختباره:

Snag_180586bf.thumb.png.fa8588ce3b7e7b37226b8a2ff4e871a0.png

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...