الفرق بين المراجعتين ل"ReactNative/usewindowdimensions"
(أنشأ الصفحة ب'== الخطّاف useWindowDimensions == <syntaxhighlight lang="javascript"> import { useWindowDimensions } from 'react-native'; </syntaxhighlight>يحدّث الخطّ...') |
|||
| سطر 29: | سطر 29: | ||
export default App; | export default App; | ||
| − | </syntaxhighlight>يهدف الخطّاف [https://github.com/react-native-community/hooks#usedimensions useDimensions] من مجتمع | + | </syntaxhighlight>يهدف الخطّاف [https://github.com/react-native-community/hooks#usedimensions useDimensions] من مجتمع الخطّافات [https://github.com/react-native-community/hooks React native hooks] إلى تسهيل معالجة التغييرات في حجم الشاشة أو النافذة. |
| − | تأتي الأبعاد [https://github.com/DaniAkash/react-native-responsive-dimensions React Native | + | تأتي الأبعاد [https://github.com/DaniAkash/react-native-responsive-dimensions React Native Responsive Dimensions] أيضًا مع خطافات مستجيبة responsive مع الشاشات. |
==== الخصائص ==== | ==== الخصائص ==== | ||
| سطر 38: | سطر 38: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
useWindowDimensions().fontScale; | useWindowDimensions().fontScale; | ||
| − | </syntaxhighlight>تمثّل مقياس الخط المستخدم حاليًا، إذ تسمح بعض أنظمة التشغيل للمستخدمين بتكبير أو تصغير حجم الخط من أجل القراءة المريحة، حيث ستتيح لك هذه الخاصية معرفة | + | </syntaxhighlight>تمثّل مقياس الخط المستخدم حاليًا، إذ تسمح بعض أنظمة التشغيل للمستخدمين بتكبير أو تصغير حجم الخط من أجل القراءة المريحة، حيث ستتيح لك هذه الخاصية معرفة المُستخدَم حاليًا. |
===== <code>height</code> ===== | ===== <code>height</code> ===== | ||
مراجعة 01:23، 25 يونيو 2021
الخطّاف useWindowDimensions
import { useWindowDimensions } from 'react-native';
يحدّث الخطّاف useWindowDimensions تلقائيًا قيم العرض width والارتفاع height عندما يتغير حجم الشاشة. يمكنك الحصول على عرض وارتفاع نافذة تطبيقك كما يلي:
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;
مثال
import React from "react";
import { View, StyleSheet, Text, useWindowDimensions } from "react-native";
const App = () => {
const window = useWindowDimensions();
return (
<View style={styles.container}>
<Text>{`Window Dimensions: height - ${window.height}, width - ${window.width}`}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
}
});
export default App;
يهدف الخطّاف useDimensions من مجتمع الخطّافات React native hooks إلى تسهيل معالجة التغييرات في حجم الشاشة أو النافذة.
تأتي الأبعاد React Native Responsive Dimensions أيضًا مع خطافات مستجيبة responsive مع الشاشات.
الخصائص
fontScale
useWindowDimensions().fontScale;
تمثّل مقياس الخط المستخدم حاليًا، إذ تسمح بعض أنظمة التشغيل للمستخدمين بتكبير أو تصغير حجم الخط من أجل القراءة المريحة، حيث ستتيح لك هذه الخاصية معرفة المُستخدَم حاليًا.
height
useWindowDimensions().height;
تعطي هذه الخاصية ارتفاع النافذة أو الشاشة التي يشغلها تطبيقك مقدرًا بالبكسل.
scale
useWindowDimensions().scale;
معدّل بكسلات الجهاز الذي يعمل عليه تطبيقك.
تشير القيمة 1 إلى PPI / DPI بقيمة 96 (76 في بعض المنصات)، وتشير القيمة 2 إلى عرض Retina أو DPI عالي الجودة.
width
useWindowDimensions().width;
تمثّل هذه الخاصية عرض النافذة أو الشاشة التي يشغلها تطبيقك مقدّرًا بالبكسل.