cách xử lý các kích thước màn hình khác nhau theo kiểu gốc tự nhiên?

Question

Tôi đang phát triển một ứng dụng dựa trên phản ứng gốc. Tôi đã thực hiện một giao diện người dùng hoạt động tốt trên iPhone 6 nhưng không hoạt động tốt trên iPhone 5 hoặc phiên bản thấp hơn. Tôi nên sửa lỗi này như thế nào?

Answer 1

Bạn đã thiết kế ứng dụng bằng chiều rộng cố định và chiều cao? Bạn chắc chắn nên sử dụng khả năng của flexbox và cố gắng tránh các thiết lập kích thước cố định càng nhiều càng tốt. Bạn có thể sử dụng flex property để xác định khoảng không gian <View /> nên sử dụng lại cho người khác và các thuộc tính khác trên trang đó có thể được sử dụng để bố trí các yếu tố theo cách linh hoạt để cung cấp kết quả mong muốn trên một loạt các kích thước màn hình khác nhau.

Đôi khi, bạn cũng có thể cần <ScrollView />.

Khi bạn cần kích thước cố định, bạn có thể sử dụng Dimensions.get('window').

Answer 2

Bạn cần tính toán kích thước động, dựa vào kích thước màn hình.

import { Dimensions, StyleSheet } from 'react-native' 

[...] 

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

[...] 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1. 
     flexDirection: 'column', 
    }, 
    myView: { 
     width: width * 0.8, // 80% of screen's width 
     height: height * 0.2 // 20% of screen's height 
    } 
}) 

Nếu bạn đang sử dụng TabbarIOS, hãy nhớ rằng Dimensions.get('window') mang đến cho bạn chiều cao toàn màn hình, điều này có nghĩa là bạn sẽ phải mất trong tài khoản đó cho thanh tabbar đã cố định chiều cao của 56. Vì vậy, ví dụ , khi sử dụng TabbarIOS:

const WIDTH = Dimensions.get('window').width, 
     HEIGHT = Dimensions.get('window').height - 56 

Sau đó sử dụng WIDTH và HEIGHT như trên.