如何處理不同的屏幕尺寸反應原生？

Question

我正在開發一個關於react-native的應用程序。我已經制作了一個在iPhone 6上正常工作的UI，但在iPhone 5或更低版本上無法正常工作。 我應該如何解決這個問題？

Answer 1

您是否使用固定寬度和高度設計了應用程序？您一定要使用flexbox的功能，儘量避免設置固定大小的設置。可以使用flex property來定義多少空間應該對其他人更具有相關性，並且可以使用該頁面上的其他屬性以靈活的方式佈置元素，以便在各種不同的屏幕尺寸上提供所需的結果。

有時，您可能還需要一個<ScrollView />。

當您確實需要固定尺寸時，您可以使用Dimensions.get('window')。

Answer 2

您需要根據屏幕大小動態計算大小。 56. 因此，例如

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 
    } 
}) 

如果使用TabbarIOS，記住Dimensions.get('window')給你整個屏幕的高度，這意味着你將不得不採取在帳戶中的TabBar已定高，使用時TabbarIOS：

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

然後使用上面的WIDTH和HEIGHT。