So erstellen Sie responsive Layouts in React Native

Veröffentlicht: 2019-10-10

Die Entwickler von nativen Apps haben sich immer viel Mühe gegeben, schöne Apps mit einer reichhaltigen Benutzeroberfläche zu erstellen, die auf jedem unterstützten Gerät stabil sind. Für iOS bedeutet dies nur wenige Geräte. Für Android könnten es über ein Dutzend sein.

Wenn Sie eine App mit React Native entwickeln, können Sie diese Zahlen addieren und dann mit zwei multiplizieren, da jedes Gerät gedreht werden kann. In diesem kurzen Artikel werde ich versuchen, Ihnen ein paar Tools und Tricks zu zeigen, die Ihnen helfen können, mit der riesigen Auswahl an Geräten umzugehen, ohne verrückt zu werden!

1. Zunächst einmal FLEXBOX

Komponenten können das Layout mit einem Flexbox-Algorithmus steuern. Es wurde erstellt, um die Proportionen und Konsistenz des Layouts auf verschiedenen Bildschirmgrößen beizubehalten.

Flexbox funktioniert sehr ähnlich wie CSS im Web mit nur wenigen Ausnahmen, die wirklich leicht zu erlernen sind. Wenn flex prop eine positive Zahl ist, werden die Komponenten flexibel und passen sich entsprechend ihrem Flex-Wert an den Bildschirm an. Das bedeutet, dass flex gleich flexGrow ist: [Zahl], flexShrink: 1, flexBasis: 0.

Wenn flex: 0 – es wird entsprechend der Höhe und Breite bemessen und ist unflexibel.
Wenn flex eine negative Zahl ist, verwendet es auch Höhe und Breite, aber wenn nicht genügend Platz vorhanden ist, wird es auf seine minHeight und minWidth verkleinert.

Es gibt nur wenige Haupteigenschaften, die von Flexbox bereitgestellt werden, also gehen wir sie durch!
Flex beschreibt, wie Elemente den Raum zwischen sich aufteilen. Wie oben erwähnt, ist es auf einzelne Zahlen beschränkt.

Wenn alle Elemente Flex: 1 haben, haben sie die gleiche Breite.
In anderen Fällen teilen sie die Summe des Flex untereinander auf

Flex-Richtung – wir können eine Reihe oder eine Spalte auswählen (Sie können auch das Gegenteil einstellen), um Ihre Hauptachse festzulegen, entlang der Ihr Inhalt platziert wird. Standardmäßig ist flexDirection auf eine Spalte statt auf eine Zeile eingestellt – was durch die Art des Bildschirms auf mobilen Geräten verursacht wird.

justifyContent – diese Requisite hilft Ihnen, Inhalte innerhalb eines Containers entlang der Hauptachse zu positionieren. Nachfolgend können Sie einige mögliche Platzierungen überprüfen:

justifyContent - 3 mögliche Platzierungen

Elemente ausrichten – funktioniert genauso wie justifyContent, richtet jedoch Elemente auf der senkrechten Achse zur Hauptachse aus.

Flex-Requisiten leisten wirklich gute Arbeit, um die Proportionen zwischen den Elementen beizubehalten. Unabhängig von der Bildschirmgröße. FlexDirection und justifyContent halten das Layoutverhalten konsistent.

Es gibt viele weitere Flexbox-Requisiten. Ich habe nur einige berührt, um zu zeigen, wie sie hilfreich sein können.

2. Seitenverhältnis

Eine weitere coole Eigenschaft ist das Seitenverhältnis (nur in React Native verfügbar), das hilft, die Proportionen Ihrer Elemente unter Kontrolle zu halten. Wenn Sie nur eine Dimension Ihres Elements kennen (Breite oder Höhe), behält es die zweite Dimension in Relation zu der bereits bekannten.

3. Bildschirmabmessungen

Es ist großartig, wenn Ihre Designs für beide Plattformen und alle Arten von Geräten (Handys, Tablets, iPads) gleich sind. Manchmal müssen wir uns jedoch mit unterschiedlichen Layouts für bestimmte Bildschirmabmessungen oder Gerätetypen auseinandersetzen.

Standardmäßig bietet React Native keine Eigenschaften, die eindeutig beantworten, welches Gerät oder welche Bildschirmgröße es ist. Doch dafür gibt es Abhilfe.

Um die Bildschirmabmessungen herauszufinden, können wir die Dimensions-API verwenden.

 import { Dimensions } from 'react-native'; const {width, height} = Dimensions.get('window');

Seit React Native 0.61 können Sie auch einen Hook verwenden.

 const {width, height} = useWindowDimensions();

Sobald wir die Breite aus den unterstützten Bereichsbildschirmgrößen erhalten haben, können Sie Haltepunkte auswählen, von denen aus sich Ihr Layout ändern kann. Sie können verschiedene Stile für Komponenten bereitstellen oder einige Teile des Bildschirms ausblenden. Dies ist ein ähnliches Verhalten wie in CSS verwendete Medienabfragen .

 import { Text, View, Dimensions } from 'react-native'; class App extends PureComponent { constructor(props) { super(props); this.state = { width: Dimensions.get('window').width }; } render() { return ( <View> {this.state.width < 320 ? <Text>width of the past</Text> : <Text>how big is big enough?</Text>} </View> ); } }

4. Erkennen Sie die Plattform

Abgesehen von der Bildschirmgröße können Sie auch das Layout ändern, je nachdem, welche Plattform-App gestartet wird. Um dies zu erreichen, können wir das Plattformmodul verwenden.

Es gibt viele Fälle, in denen es verwendet werden kann:
In der Komponentenrenderfunktion:

 <View> {Platform.OS === 'ios' ? <Text>Hi Apple!</Text> : <Text>Hi Android!</Text>} </View>

In Stilrichtungen:

 cube: { width: Platform.OS === 'ios' ? 200 : 300, aspectRatio: 1 }

Das Plattformmodul bietet eine Auswahlmethode, die jede Art von Argumenten akzeptieren kann. Mit dieser Flexibilität können wir den gleichen Effekt wie oben erzielen, aber einen saubereren Code:

 const Logo = Platform.select({ ios: () => require('Apple'), android: () => require('Android'), })(); <Logo />;

In Stilrichtungen:

 import {Platform, StyleSheet} from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'blue', }, }), }, });

5. Geräterotation

Viele Apps können im Hoch- und Querformat arbeiten. Wenn dies bei Ihrer App der Fall ist, müssen Sie sicherstellen, dass das Layout beim Ändern der Ausrichtung nicht unterbrochen wird. Wie Sie erwarten können, kann sich das Layout manchmal drastisch ändern, wenn Sie das Gerät umdrehen. Je nach Ausrichtung benötigen Ihre Komponenten möglicherweise ein anderes Design. Leider löst die Drehung des Geräts standardmäßig kein erneutes Rendern aus. Deshalb muss es manuell gehandhabt werden. Wir haben bereits das erforderliche Wissen, um unsere eigenen zu bauen, und es ist ganz einfach!

 class RotateComponent extends PureComponent { constructor(props) { super(props); this.state = { orientation: '' }; } getOrientation = () => { if (Dimensions.get('window').width < Dimensions.get('window').height) { this.setState({ orientation: 'portrait' }); } else { this.setState({ orientation: 'landscape' }); } }; componentDidMount() { Dimensions.addEventListener('change', this.getOrientation); } render() { return ( <Text>{this.state.orientation}</Text> ); } }

Wenn Sie die Orientierungsänderung in der gesamten App unterstützen müssen, ist es eine gute Idee, HOC zum Einfügen der Orientierung zu verwenden.

Das ist alles! Sie können getOrientation auch an die onLayout-Prop übergeben, die von der View-Komponente bereitgestellt wird. Es wird bei jeder Layoutänderung ausgelöst, daher sollte es mit Vorsicht verwendet werden. Die Entscheidung liegt bei Ihnen!

Neugierig auf React Native?

Mehr erfahren

Wenn Sie die Ausrichtung in Ihren Stilen nutzen möchten, denken Sie daran, dass es sich um Inline-Stile handeln sollte. Wir wissen bereits, wie man ein erneutes Rendern des Layouts auslöst, wenn das Gerät gedreht wird, aber die Stile werden nur einmal geladen. Deshalb sollten Stile, die das Layout beim Drehen beeinflussen, inline platziert werden.

Wie zu erwarten, bietet eine riesige React Native-Community bereits Pakete an, die viele der hier genannten Probleme lösen. Sie können es hier oder hier überprüfen, um nur einige zu nennen.