ความกว้างของหน้าจอใน React Native

ฉันจะรับความกว้างของหน้าจอใน React native ได้อย่างไร

(ฉันต้องการเพราะฉันใช้ส่วนประกอบสัมบูรณ์บางอย่างที่ทับซ้อนกันและตำแหน่งบนหน้าจอเปลี่ยนไปตามอุปกรณ์ต่างๆ)

ใน React-Native เรามีตัวเลือกที่เรียกว่า Dimensions

รวมขนาดไว้ที่ตัวแปรด้านบนที่คุณมีรูปภาพข้อความและส่วนประกอบอื่น ๆ

จากนั้นในสไตล์ชีตของคุณคุณสามารถใช้ดังต่อไปนี้

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

ด้วยวิธีนี้คุณจะได้รับหน้าต่างอุปกรณ์และความสูง

เพียงแค่ประกาศรหัสนี้เพื่อรับความกว้างของอุปกรณ์

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

อาจจะเห็นได้ชัด แต่ Dimensions เป็นการนำเข้าแบบตอบสนอง

import { Dimensions } from 'react-native'

ขนาดจะไม่ทำงานหากไม่มีสิ่งนั้น

หากคุณมีองค์ประกอบสไตล์ที่ต้องการจากคอมโพเนนต์ของคุณคุณอาจมีสิ่งนี้ที่ด้านบนของไฟล์:

const Dimensions = require('Dimensions');

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

จากนั้นคุณสามารถระบุfulscreen: {width: window.width, height: window.height},ในองค์ประกอบสไตล์ของคุณได้ หวังว่านี่จะช่วยได้

React Native Dimensions เป็นเพียงคำตอบบางส่วนสำหรับคำถามนี้ฉันมาที่นี่เพื่อค้นหาขนาดพิกเซลที่แท้จริงของหน้าจอและ Dimensions ให้ขนาดเค้าโครงที่เป็นอิสระต่อความหนาแน่น

คุณสามารถใช้ React Native Pixel Ratio เพื่อรับขนาดพิกเซลจริงของหน้าจอ

คุณต้องมีใบแจ้งการนำเข้าสำหรับทั้ง Dimenions และ PixelRatio

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

คุณสามารถใช้การทำลายโครงสร้างวัตถุเพื่อสร้างความกว้างและความสูงลูกโลกหรือวางไว้ในสไตล์ชีตตามที่คนอื่นแนะนำ แต่ระวังสิ่งนี้จะไม่อัปเดตในการปรับเปลี่ยนอุปกรณ์

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

จาก React Native Dimension Docs:

หมายเหตุ: แม้ว่ามิติจะพร้อมใช้งานในทันที แต่ก็อาจเปลี่ยนแปลงได้ (เช่นเนื่องจาก> การหมุนของอุปกรณ์) ดังนั้นตรรกะหรือรูปแบบการแสดงผลใด ๆ ที่ขึ้นอยู่กับค่าคงที่เหล่านี้> ควรพยายามเรียกใช้ฟังก์ชันนี้ในทุกการเรนเดอร์แทนที่จะแคชค่า> (ตัวอย่างเช่น โดยใช้สไตล์อินไลน์แทนที่จะตั้งค่าใน StyleSheet)

ลิงก์PixelRatio Docs สำหรับผู้ที่อยากรู้อยากเห็น แต่ยังไม่มีอีกมาก

ในการใช้ขนาดหน้าจอจริง:

PixelRatio.getPixelSizeForLayoutSize(width);

หรือถ้าคุณไม่ต้องการให้ความกว้างและความสูงเป็นทรงกลมคุณสามารถใช้มันได้ทุกที่เช่นนี้

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

React Native มาพร้อมกับ API "Dimensions" ซึ่งเราต้องนำเข้าจาก "react-native"

import { Dimensions } from 'react-native';

จากนั้น

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

10 เมษายน 2020 คำตอบ:

คำตอบที่แนะนำโดยใช้Dimensionsตอนนี้หมดกำลังใจ ดู: https://reactnative.dev/docs/dimensions

แนวทางที่แนะนำคือใช้useWindowDimensionshook ใน React; https://reactnative.dev/docs/usewindowdimensionsซึ่งใช้ hook based API และจะอัปเดตค่าของคุณเมื่อค่าหน้าจอเปลี่ยนไป (เช่นในการหมุนหน้าจอ):

import {useWindowDimensions} from 'react-native';

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

หมายเหตุ: useWindowDimensionsสามารถใช้ได้จาก React Native 0.61.0 เท่านั้น: https://reactnative.dev/blog/2019/09/18/version-0.61

เพียงสองขั้นตอนง่ายๆ

1. import { Dimensions } from 'react-native' ที่ด้านบนของไฟล์ของคุณ
2. const { height } = Dimensions.get('window');

ตอนนี้ความสูงของหน้าจอหน้าต่างจะถูกเก็บไว้ในตัวแปรความสูง

เพิ่งค้นพบreact-native-responsive-screen repo ที่นี่ พบว่ามีประโยชน์มาก

react-native-responsive-screen เป็นไลบรารีขนาดเล็กที่มี 2 วิธีง่ายๆเพื่อให้นักพัฒนา React Native สามารถเขียนโค้ดองค์ประกอบ UI ที่ตอบสนองได้อย่างเต็มที่ ไม่จำเป็นต้องมีการสืบค้นสื่อ

นอกจากนี้ยังมีวิธีที่สามซึ่งเป็นทางเลือกสำหรับการตรวจจับการวางหน้าจอและการแสดงผลอัตโนมัติตามขนาดใหม่

ฉันคิดว่าการใช้react-native-responsive-dimensionsอาจช่วยคุณได้ดีขึ้นเล็กน้อยในกรณีของคุณ

คุณยังสามารถรับ:

ความกว้างของอุปกรณ์โดยใช้และ responsiveScreenWidth(100)

และ

ความสูงของอุปกรณ์โดยใช้และ responsiveScreenHeight(100)

นอกจากนี้คุณยังสามารถจัดตำแหน่งของส่วนประกอบสัมบูรณ์ของคุณได้ง่ายขึ้นด้วยการตั้งค่าระยะขอบและค่าตำแหน่งโดยจัดสัดส่วนให้มากกว่า 100% ของความกว้างและความสูง