प्रतिक्रिया मूल में स्क्रीन की चौड़ाई

Question

रिएक्ट मूल में मुझे स्क्रीन की चौड़ाई कैसे मिलती है?

(मुझे इसकी आवश्यकता है क्योंकि मैं कुछ पूर्ण घटकों का उपयोग करता हूं जो अलग-अलग उपकरणों के साथ स्क्रीन परिवर्तन पर ओवरलैप और उनकी स्थिति)

Answer 1

React-Native में हमारे पास एक विकल्प होता है जिसे आयाम कहते हैं

शीर्ष संस्करण पर आयाम शामिल करें जहां आपके पास छवि, और पाठ और अन्य घटक शामिल हैं।

फिर अपनी स्टाइल्सशीट में आप नीचे दिए अनुसार उपयोग कर सकते हैं,

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

इस तरह आप डिवाइस विंडो और ऊंचाई प्राप्त कर सकते हैं।

Comments

अगर मैं 2 घटकों की चौड़ाई को बराबर करने के लिए योग करना चाहता हूं तो मैं इसका उपयोग कैसे कर सकता हूं Dimensions.get('window').width?

— एंडी 95

बस इन मूल्यों को विश्व स्तर पर सहेजें और कहीं भी इसका उपयोग सुरक्षित नहीं है जब आपका डिवाइस घुमाया जाता है। मैं फ़ंक्शन घटकों में प्रतिक्रिया हुक का उपयोग करने की सलाह देता हूं

— एमजे स्टूडियो

Answer 2

डिवाइस की चौड़ाई प्राप्त करने के लिए बस इस कोड को घोषित करें

let deviceWidth = Dimensions.get('window').width

---

शायद यह स्पष्ट रूप से लेकिन, आयाम एक प्रतिक्रिया-देशी आयात है

import { Dimensions } from 'react-native'

उसके बिना आयाम काम नहीं करेंगे

Comments

धन्यवाद! स्टैक ओवरफ्लो पर लोग बाहर निकल जाते हैं जहां अक्सर उनका आयात होता है। इसे शामिल करने के लिए धन्यवाद, बस यही मुझे चाहिए था। इसकी आधिकारिक डॉक्स में नहीं।

— जैक डेविडसन

Answer 3

यदि आपके पास एक शैली घटक है जिसे आपको अपने घटक से आवश्यकता हो सकती है, तो आप फ़ाइल के शीर्ष पर ऐसा कुछ कर सकते हैं:

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

और फिर आप fulscreen: {width: window.width, height: window.height},अपने स्टाइल घटक में प्रदान कर सकते हैं । उम्मीद है की यह मदद करेगा

Answer 4

प्रतिक्रियाशील मूल आयाम इस प्रश्न का केवल एक आंशिक उत्तर है, मैं यहां स्क्रीन के वास्तविक पिक्सेल आकार की तलाश में आया था, और आयाम वास्तव में आपको घनत्व स्वतंत्र लेआउट आकार देता है।

आप स्क्रीन के वास्तविक पिक्सेल आकार को प्राप्त करने के लिए React Native Pixel Ratio का उपयोग कर सकते हैं।

आपको डिमेन्शन और PixelRatio दोनों के लिए आयात विवरण की आवश्यकता है

import { Dimensions, PixelRatio } from 'react-native';

आप चौड़ाई और ऊंचाई के ग्लोबल्स बनाने के लिए विनाशकारी वस्तु का उपयोग कर सकते हैं या इसे स्टाइलशीट में डाल सकते हैं, जैसा कि अन्य लोग सुझाव देते हैं, लेकिन सावधान रहें कि यह डिवाइस पुनर्संयोजन पर अपडेट नहीं होगा।

const { width, height } = Dimensions.get('window');

प्रतिक्रियाशील मूल आयाम डॉक्स से:

नोट: हालांकि आयाम तुरंत उपलब्ध हैं, वे बदल सकते हैं (उदाहरण के लिए> डिवाइस रोटेशन) इसलिए कोई भी प्रतिपादन तर्क या शैली जो इन स्थिरांक पर निर्भर करती हैं> इस फ़ंक्शन को हर रेंडर पर कॉल करने का प्रयास करना चाहिए, न कि मान को कैशिंग> (उदाहरण के लिए) , एक स्टाइलशीट में मान सेट करने के बजाय इनलाइन शैलियों का उपयोग करते हुए)।

PixelRatio डॉक्स उन लोगों के लिए लिंक करता है जो उत्सुक हैं, लेकिन वहाँ बहुत अधिक नहीं हैं।

वास्तव में स्क्रीन आकार का उपयोग करने के लिए:

PixelRatio.getPixelSizeForLayoutSize(width);

या यदि आप चौड़ाई और ऊँचाई को गोलाकार नहीं बनाना चाहते हैं तो आप इसे इस तरह से कहीं भी उपयोग कर सकते हैं

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

Answer 5

प्रतिक्रिया मूलक "आयाम" आपी के साथ आता है जिसे हमें 'प्रतिक्रिया-मूल' से आयात करने की आवश्यकता होती है

import { Dimensions } from 'react-native';

फिर,

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>

Answer 6

10 अप्रैल 2020 उत्तर:

उपयोग किए गए सुझाए गए उत्तर Dimensionsको अब हतोत्साहित किया जाता है। देखें: https://reactnative.dev/docs/dimensions

अनुशंसित दृष्टिकोण useWindowDimensionsरिएक्ट में हुक का उपयोग कर रहा है ; https://reactnative.dev/docs/usewindowdimensions जो हुक आधारित API का उपयोग करता है और स्क्रीन मूल्य में परिवर्तन (उदाहरण के लिए स्क्रीन रोटेशन) पर भी आपके मूल्य को अपडेट करेगा:

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

नोट: useWindowDimensionsकेवल रिएक्टिव नेटिव 0.61.0 से उपलब्ध है: https://reactnative.dev/blog/2019/09/18/version-0.61

Answer 7

केवल दो सरल कदम।

1. import { Dimensions } from 'react-native' आपकी फ़ाइल के शीर्ष पर।
2. const { height } = Dimensions.get('window');

अब विंडो स्क्रीन की ऊंचाई ऊंचाई चर में संग्रहीत है।

Comments

निश्चित नहीं है कि आपने केवल उसी उत्तर के साथ उत्तर क्यों दिया है? यह वास्तव में क्या जोड़ता है?

— रामबातिन

Answer 8

बस react-native-responsive-screen यहाँ रेपो की खोज की । बहुत काम आया।

प्रतिक्रिया-देशी-उत्तरदायी-स्क्रीन एक छोटी सी लाइब्रेरी है जो 2 सरल तरीके प्रदान करती है ताकि रिएक्ट नेटिव डेवलपर्स अपने यूआई तत्वों को पूरी तरह उत्तरदायी बना सकें। मीडिया के सवालों की जरूरत नहीं।

यह नए आयामों के अनुसार स्क्रीन ऑरिएशन डिटेक्शन और ऑटोमैटिक रीरेंडरिंग के लिए एक वैकल्पिक तीसरा तरीका भी प्रदान करता है।

Answer 9

मुझे लगता है कि प्रयोग react-native-responsive-dimensionsकरने से आपको अपने मामले में थोड़ी बेहतर मदद मिल सकती है।

आप अभी भी प्राप्त कर सकते हैं:

डिवाइस-चौड़ाई का उपयोग करके और responsiveScreenWidth(100)

तथा

डिवाइस-ऊंचाई का उपयोग करके और responsiveScreenHeight(100)

आप अधिक आसानी से अपने पूर्ण घटकों के स्थानों को मार्जिन और स्थिति मान सेट करके व्यवस्थित कर सकते हैं, जिसकी चौड़ाई 100% से अधिक है।