الفرق بين المراجعتين لصفحة: «ReactNative/safeareaview»
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: SafeAreaView في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكون SafeAreaView في React Native}}</noinclude> | ||
الغرض من مكوّن <code>SafeAreaView</code> هو تصيير محتوى داخل حدود المنطقة الآمنة للجهاز. لا ينطبق حاليًا إلا على أجهزة iOS ذات الإصدار 11 من نظام التشغيل iOS أو أحدث. | الغرض من مكوّن <code>SafeAreaView</code> هو تصيير محتوى داخل حدود المنطقة الآمنة للجهاز. لا ينطبق حاليًا إلا على أجهزة iOS ذات الإصدار 11 من نظام التشغيل iOS أو أحدث. | ||
يُصيِّر مكوّن <code>SafeAreaView</code> محتوًى | يُصيِّر مكوّن <code>SafeAreaView</code> محتوًى متداخلًا ويُطبِّق الحاشية (padding) تلقائيًا ليعكس جزء العرض الذي لا تغطيه أشرطة التنقل (navigation bars) وأشرطة علامات التبويب وأشرطة الأدوات وعروضٍ أسلافٍ (ancestor views) أخرى. والأهم من ذلك، تَعكس حواشي المنطقة الآمنة الحدود المادية للشاشة، مثل الزوايا الدائرية أو مساحة الكاميرا (أي منطقة المستشعرات على iPhone X). | ||
==مثال== | ==مثال== | ||
لاستخدام المكوّن، غلِّف عرض المستوى العلوي (top level view) الخاص بك باستخدام مكوّن <code>SafeAreaView</code> بنمط <code>flex: 1</code>. قد ترغب أيضًا في استخدام لون خلفيةٍ يطابق تصميم تطبيقك. | لاستخدام المكوّن، غلِّف عرض المستوى العلوي (top level view) الخاص بك باستخدام مكوّن <code>SafeAreaView</code> بنمط <code>flex: 1</code>. قد ترغب أيضًا في استخدام لون خلفيةٍ يطابق تصميم تطبيقك. | ||
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/safeareaview تجربة حية]): | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from 'react'; | import React from 'react'; | ||
import { StyleSheet, Text, SafeAreaView } from 'react-native'; | import { StyleSheet, Text, SafeAreaView } from 'react-native'; | ||
const App = () => { | |||
return ( | return ( | ||
<SafeAreaView style={styles.container}> | <SafeAreaView style={styles.container}> | ||
| سطر 23: | سطر 25: | ||
}, | }, | ||
}); | }); | ||
export default App; | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== الخاصيات == | == الخاصيات == | ||
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>. | يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>. | ||
ملاحظة: بما أن الحاشية مستعملة لتنفيذ سلوك الكون، فسيجري تجاهل قواعد الحاشية المطبقة على مكون SafeAreaView وقد تعطي نتائج مختلفة باختلاف المنصة، لذا انظر المشكلة [https://github.com/facebook/react-native/issues/22211 #22211] لمزيد من التفصيل. | |||
===<code>emulateUnlessSupported</code>=== | ===<code>emulateUnlessSupported</code>=== | ||
| سطر 31: | سطر 37: | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
! | !القيمة الافتراضية | ||
|- | |- | ||
|قيمة منطقية | |قيمة منطقية | ||
|لا | |لا | ||
| | |<code>true</code> | ||
|} | |} | ||
== مصادر == | == مصادر == | ||
* [https:// | * [https://reactnative.dev/docs/safeareaview صفحة SafeAreaView في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
[[تصنيف:React Native Component]] | |||
المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021
الغرض من مكوّن SafeAreaView هو تصيير محتوى داخل حدود المنطقة الآمنة للجهاز. لا ينطبق حاليًا إلا على أجهزة iOS ذات الإصدار 11 من نظام التشغيل iOS أو أحدث.
يُصيِّر مكوّن SafeAreaView محتوًى متداخلًا ويُطبِّق الحاشية (padding) تلقائيًا ليعكس جزء العرض الذي لا تغطيه أشرطة التنقل (navigation bars) وأشرطة علامات التبويب وأشرطة الأدوات وعروضٍ أسلافٍ (ancestor views) أخرى. والأهم من ذلك، تَعكس حواشي المنطقة الآمنة الحدود المادية للشاشة، مثل الزوايا الدائرية أو مساحة الكاميرا (أي منطقة المستشعرات على iPhone X).
مثال
لاستخدام المكوّن، غلِّف عرض المستوى العلوي (top level view) الخاص بك باستخدام مكوّن SafeAreaView بنمط flex: 1. قد ترغب أيضًا في استخدام لون خلفيةٍ يطابق تصميم تطبيقك.
إليك المثال التالي (تجربة حية):
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<Text>Page content</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
الخاصيات
يرث خاصيّات المكوّن View.
ملاحظة: بما أن الحاشية مستعملة لتنفيذ سلوك الكون، فسيجري تجاهل قواعد الحاشية المطبقة على مكون SafeAreaView وقد تعطي نتائج مختلفة باختلاف المنصة، لذا انظر المشكلة #22211 لمزيد من التفصيل.
emulateUnlessSupported
| النوع | مطلوب | القيمة الافتراضية |
|---|---|---|
| قيمة منطقية | لا | true
|