Wie behandelt man unterschiedliche Bildschirmgrößen in nativen reagieren?

Question

Ich entwickle eine Anwendung auf reaktionsnativen. Ich habe eine Benutzeroberfläche gemacht, die gut funktioniert auf iPhone 6, aber nicht gut funktioniert auf iPhone 5 oder niedrigeren Versionen. Wie soll ich das beheben?

Answer 1

Haben Sie die App mit festen Breiten und Höhen entworfen? Sie sollten auf jeden Fall die Fähigkeiten von flexbox nutzen und versuchen, Einstellungen so oft wie möglich zu vermeiden. Die kann verwendet werden, um zu definieren, wie viel Platz <View /> relational zu anderen verwenden sollte, und die anderen Eigenschaften auf dieser Seite können verwendet werden, um Elemente auf eine flexible Art und Weise auszulegen, die die gewünschten Ergebnisse auf einer Reihe von verschiedenen Bildschirmgrößen liefern sollte.

Manchmal benötigen Sie möglicherweise auch eine <ScrollView />. Wenn Sie feste Größen benötigen, können Sie Dimensions.get('window') verwenden.

Answer 2

Sie müssen Größen dynamisch berechnen, abhängig von der Bildschirmgröße.

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

Wenn Sie TabbarIOS verwenden, denken Sie daran, dass Dimensions.get('window') gibt Ihnen die ganze Höhe des Bildschirms, das bedeutet, dass Sie in Betracht ziehen müssen, werden feststellen, dass die Tabbar-Höhe fixiert zum Beispiel von 56 So hat wenn TabbarIOS mit:

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

Dann WIDTH und HEIGHT verwenden wie oben.