Câu trả lời:
Trong React-Native, chúng tôi có một tùy chọn gọi là Thứ nguyên
Bao gồm Kích thước ở var trên cùng nơi bạn có bao gồm Hình ảnh và Văn bản và các thành phần khác.
Sau đó, trong Biểu định kiểu của bạn, bạn có thể sử dụng như bên dưới,
ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}
Bằng cách này, bạn có thể nhận được chiều cao và cửa sổ của thiết bị.
Chỉ cần khai báo mã này để nhận chiều rộng thiết bị
let deviceWidth = Dimensions.get('window').width
Có thể rõ ràng là vậy nhưng, Thứ nguyên là một phép nhập gốc phản ứng
import { Dimensions } from 'react-native'
Kích thước sẽ không hoạt động nếu không có điều đó
Nếu bạn có một thành phần Kiểu mà bạn có thể yêu cầu từ Thành phần của mình, thì bạn có thể có một cái gì đó như thế này ở đầu tệp:
const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
Và sau đó bạn có thể cung cấp fulscreen: {width: window.width, height: window.height},thành phần Style của mình. Hi vọng điêu nay co ich
React Native Dimensions chỉ là câu trả lời một phần cho câu hỏi này, tôi đến đây để tìm kiếm kích thước pixel thực tế của màn hình và Kích thước thực sự cung cấp cho bạn kích thước bố cục độc lập về mật độ.
Bạn có thể sử dụng React Native Pixel Ratio để lấy kích thước pixel thực của màn hình.
Bạn cần câu lệnh nhập cho cả Dimenion và PixelRatio
import { Dimensions, PixelRatio } from 'react-native';
Bạn có thể sử dụng cấu trúc đối tượng để tạo hình cầu chiều rộng và chiều cao hoặc đặt nó trong các bảng định kiểu như những người khác đề xuất, nhưng hãy lưu ý rằng điều này sẽ không cập nhật khi định hướng lại thiết bị.
const { width, height } = Dimensions.get('window');
Từ Tài liệu thứ nguyên React Native :
Lưu ý: Mặc dù các thứ nguyên có sẵn ngay lập tức, chúng có thể thay đổi (ví dụ: do> xoay thiết bị) vì vậy bất kỳ logic hoặc kiểu hiển thị nào phụ thuộc vào các hằng số này> nên cố gắng gọi hàm này trên mỗi lần hiển thị, thay vì lưu giá trị vào bộ nhớ đệm> (ví dụ: , sử dụng các kiểu nội tuyến thay vì đặt một giá trị trong StyleSheet).
Liên kết PixelRatio Docs dành cho những ai tò mò, nhưng không nhiều hơn ở đó.
Để thực sự có được kích thước màn hình, hãy sử dụng:
PixelRatio.getPixelSizeForLayoutSize(width);
hoặc nếu bạn không muốn chiều rộng và chiều cao là hình cầu, bạn có thể sử dụng nó ở bất cứ đâu như thế này
PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);
React Native đi kèm với api "Dimensions" mà chúng ta cần nhập từ 'react-native'
import { Dimensions } from 'react-native';
Sau đó,
<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>
Ngày 10 tháng 4 năm 2020 Trả lời:
Câu trả lời được đề xuất sử dụng Dimensionshiện không được khuyến khích. Xem: https://reactnative.dev/docs/dimensions
Cách tiếp cận được đề xuất là sử dụng useWindowDimensionshook trong React; https://reactnative.dev/docs/usewindowdimensions sử dụng API dựa trên móc nối và cũng sẽ cập nhật giá trị của bạn khi giá trị màn hình thay đổi (ví dụ: khi xoay màn hình):
import {useWindowDimensions} from 'react-native';
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;
Lưu ý: useWindowDimensionschỉ khả dụng từ React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61
Chỉ hai bước đơn giản.
import { Dimensions } from 'react-native' ở đầu tệp của bạn.const { height } = Dimensions.get('window');bây giờ chiều cao màn hình cửa sổ được lưu trữ trong biến chiều cao.
Chỉ cần phát hiện ra react-native-responsive-screen repo ở đây . Thấy nó rất tiện dụng.
react-native-responsive-screen là một thư viện nhỏ cung cấp 2 phương pháp đơn giản để các nhà phát triển React Native có thể viết mã các phần tử giao diện người dùng của họ đáp ứng đầy đủ. Không cần truy vấn phương tiện truyền thông.
Nó cũng cung cấp một phương pháp thứ ba tùy chọn để phát hiện tóm tắt màn hình và kết xuất tự động theo các kích thước mới.
Tôi nghĩ việc sử dụng react-native-responsive-dimensionscó thể giúp bạn tốt hơn một chút trong trường hợp của bạn.
Bạn vẫn có thể nhận được:
chiều rộng thiết bị bằng cách sử dụng và responsiveScreenWidth(100)
và
chiều cao thiết bị bằng cách sử dụng và responsiveScreenHeight(100)
Bạn cũng có thể dễ dàng sắp xếp vị trí của các thành phần tuyệt đối của mình hơn bằng cách đặt các giá trị lề và vị trí với việc cân đối nó trên 100% chiều rộng và chiều cao
Dimensions.get('window').width?