📲 React Native Device Display
Gói này hiện đã ngừng phát triển và tôi không duy trì nó nữa. Trong thời gian chờ đợi, bạn cũng có thể sử dụng react-native-orientation.
Một cách đơn giản để tạo giao diện động thông qua phát hiện thiết bị, màn hình và hướng, cho phép tạo ứng dụng linh hoạt và thông dụng. Hiện chỉ dành cho React Native iOS, Android support đang trong quá trình phát triển.
Cài đặt (iOS)
Chỉ cần cài đặt gói theo cách được hiển thị dưới đây…
$ npm install react-native-device-display
Tiếp theo, bạn cần nhập các lớp DisplayDeviceUtil vào dự án của bạn, chúng được đóng gói bên trong gói NPM.
Sau đó, yêu cầu nó trong dự án của bạn bất cứ nơi nào bạn cần…
var Display = require('react-native-device-display');
Các Phương thức
Display.percentage(type, value);
Trả về giá trị phần trăm của loại width hoặc height dưới dạng pixels
Display.isTablet();
Trả về true nếu thiết bị là máy tính bảng (ví dụ: iPad)
Display.isPhone();
Trả về true nếu thiết bị là điện thoại (ví dụ: iPhone)
Display.isPortrait();
Trả về true nếu thiết bị ở chế độ hình chân dung
Display.isLandscape();
Trả về true nếu thiết bị ở chế độ hình ngang
Display.onOrientationDidChange(handler)
Kích hoạt cuộc gọi handler khi hướng thay đổi
Các Thuộc tính
Display.width
Chiều rộng dưới dạng pixels của màn hình
Display.height
Chiều cao dưới dạng pixels của màn hình
Display.verbose
Mặc định là false, thay đổi thành true cho phép thông báo console.log về các sự kiện thay đổi hướng
Ví dụ
var Display = require('react-native-device-display');
var listener;
var testing = React.createClass({
componentDidMount: function() {
listener = Display.onOrientationDidChange(function() {
//Change States, perform Magic, etc...
});
},
componentWillUnmount: function() {
//Unlisten the onOrientationChange...
listener = null;
},
render: function() {
if (Display.isPortrait()) {
//Return portrait view...
} else if (Display.isLandscape()) {
//Return landscape view...
}
//Add as many conditions and views as you see fit...
}
});
Thông tin Tải xuống:
Tác giả: kkjdaniel
Nguồn: https://github.com/kkjdaniel/react-native-device-display
Giấy phép: BSD-2-Clause license
