Bessere Möglichkeit zum Entwerfen der Benutzeroberfläche in React Native

Jun 27 2019Written by Manektech Team

Was ist React Native?

Es ist richtig festzustellen, dass Mobiltelefone die halbe Seele jeder Person sind, und in Bezug auf die Android- oder iOS-Entwicklung werden Unternehmen häufig verwirrt, ob sie ihren Kunden eine Anwendung mit Benutzeroberfläche und außergewöhnlicher Benutzererfahrung anbieten sollen. UX) oder Anwendungen, die in verschiedenen Phasen perfekt und in jedem Fall schneller zu erstellen sind. Ab sofort ist auch die REACT Native Development im Bild!

React Native sorgt dafür, dass Sie echte und aufregende Anwendungen mit Hilfe von JavaScript erstellen, das sowohl für Android- als auch für iOS-Plattformen unterstützt wird. Einfach einmal codieren und die REACT Native-Anwendungen sind für die beiden iOS- und Android-Plattformen verfügbar, wodurch Entwicklungszeit gespart wird.

Benutzeroberfläche für mobile Apps


Das Erstellen einer Benutzeroberfläche für mobile Apps ist schwieriger als dasselbe für eine Web-App. Die Gründe dafür sind:

1.Mobile Geräte haben eine begrenzte Bildschirmgröße. 
2.Jeder Mobilgerätetyp (Tablets, Smartphones usw.) unterscheidet sich von dem anderen und erfordert verschiedene Arten von Unterstützung. 
3. Android und Apple haben ihre eigenen Plattformstandards, denen ein Entwickler folgen sollte.Also eine App, die für die Arbeit gebaut wurde 
Für Android-Geräte muss der Code geändert werden, damit sie auf Apple-Geräten ausgeführt werden können

React Native bietet Plattform, die für die beiden iOS und Android verfügbar ist.

Wie können wir die Benutzeroberfläche in React Native gestalten:

Code für die Benutzeroberfläche einmal und die REACT Native-Anwendung ist für die beiden iOS- und Android- Geräte verfügbar. Es kann sowohl auf iOS- als auch auf Android-Geräten ausgeführt werden.

Nehmen wir zum Beispiel eine Button-Komponente

Diese Komponente besteht aus zwei Teilen: der Beschriftung mit der Aufschrift „Awesome Button“ und der blauen Box mit abgerundeten Ecken, die die Beschriftung umgeben. In React Native wird das Feld in deklariert und die Beschriftung wird in wie unten gezeigt deklariert.

Code:

class Button erweitert React.Component {

render () {

Rückkehr ( 
<TouchableOpacity 
style = {{ 
Hintergrundfarbe: "blau", 
Polsterung: 20, 
borderRadius: 50 
}}

>

<Text 
style = {{ 
Farbe weiß", 
fontSize: 20 
}} 
>


); 
} 
}

Style kann separat deklariert werden, anstatt es innerhalb der Klasse zu tun.

const styles = StyleSheet.create ({ 
box: { 
backgroundColor: "blau", 
Polsterung: 20, 
borderRadius: 50 
}, 
Text: { 
Farbe weiß", 
fontSize: 20 
} 
});

class Button erweitert React.Component { 
render () { 
Rückkehr ( 


{this.props.title} 


); 
} 
}

So gestalten Sie die Benutzeroberfläche

Versuchen wir, eine Benutzeroberfläche mit React Native zu erstellen.

Ein Bildschirm besteht aus 3 Hauptteilen: 
Header 
Inhaltsbereich 
Fußzeile

wird für Kopf- und Fußzeile verwendet und wird für den Inhaltsbereich verwendet. ist dasselbe wie mit der Ausnahme, mit der der Benutzer scrollen kann.

Hier ist der Code zum Erstellen einer Benutzeroberfläche aus Header, Inhaltsbereich und Fußzeile. 
Klasse App erweitert React.Component { 
render () { 
Rückkehr ( 

Header 

Ich bin die Fußzeile 


); 
} 
}

FlexBox:

Flexbox bietet ein einheitliches Layout für verschiedene Bildschirmgrößen.

Normalerweise verwenden Sie eine Kombination aus flexDirection, alignItems und justifyContent, um das richtige Layout zu erstellen.

flexDirection: 
Durch Hinzufügen von flexDirection zum Stil einer Komponente wird die Hauptachse ihres Layouts festgelegt. Sollen die Kinder horizontal (Reihe) oder vertikal (Spalte) angeordnet werden? Die Standardeinstellung ist Spalte.

Probieren Sie diesen Code aus und überprüfen Sie die Ausgabe auf Verständnis von flexDirection.

{AppRegistry, View} aus 'react-native' importieren;

Standardklasse exportieren FlexDirectionBasics erweitert Component { 
render () { 
Rückkehr ( 
// Versuche flexDirection auf column zu setzen. 

); 
} 
};

// Überspringe diese Zeile, wenn du Create React Native App benutzt 
AppRegistry.registerComponent ('AwesomeProject', () => FlexDirectionBasics);

justifyContent:

Durch Hinzufügen von justifyContent zum Stil einer Komponente wird die Verteilung der untergeordneten Elemente entlang der Primärachse festgelegt. Verfügbare Optionen sind "Flex-Start", "Flex-Ende", "Zwischenraum", "Zwischenraum" und "Mitte".

Probieren Sie diesen Code aus und überprüfen Sie die Ausgabe auf das Verständnis von justifyContent.

importiere React, {Component} von 'react'; 
{AppRegistry, View} aus 'react-native' importieren;

Standardklasse exportieren JustifyContentBasics erweitert Component { 
render () { 
Rückkehr ( 
// Versuche `justifyContent` auf` center` zu setzen. 
// Versuche `flexDirection` auf` row` zu setzen. 
flex: 1, 
flexDirection: 'Spalte', 
justifyContent: 'Zwischenraum', 
}}> 

); 
} 
};

// Überspringe diese Zeile, wenn du Create React Native App verwendest 
AppRegistry.registerComponent ('AwesomeProject', () => JustifyContentBasics);

alignItems:

Sie bestimmt die Ausrichtung der untergeordneten Elemente entlang der Sekundärachse. Wenn die primäre Achse Zeile ist, ist die sekundäre Spalte und umgekehrt. Verfügbare Optionen sind Flex-Start, Flex-Ende, Mitte, Strecken.

Probieren Sie diesen Code aus und überprüfen Sie die Ausgabe auf AlignItems.

importiere React, {Component} von 'react'; 
{AppRegistry, View} aus 'react-native' importieren;

Standardklasse exportieren AlignItemsBasics erweitert Component { 
render () { 
Rückkehr ( 
// Versuche `alignItems` auf 'flex-start' zu setzen 
// Versuche `justifyContent` auf` flex-end` zu setzen. 
// Versuche `flexDirection` auf` row` zu setzen. 
flex: 1, 
flexDirection: 'Spalte', 
justifyContent: 'center', 
alignItems: 'stretch', 
}}> 

); 
} 
};

// Überspringe diese Zeile, wenn du Create React Native App verwendest 
AppRegistry.registerComponent ('AwesomeProject', () => AlignItemsBasics);

Abschließend können wir sagen: 
Das Erstellen der Benutzeroberfläche in React Native ähnelt dem Web. 
Flexbox ist erforderlich, um bessere Layouts in React Native zu erstellen. 
Mithilfe von Bibliotheken von Drittanbietern wie NativeBase können Sie Zeit sparen, die für die Entwicklung in React Native benötigt wird.

Kontaktiere uns

Hier, um ehrgeizigen Menschen zu helfen TRANSFORMIEREN Sie die digitalen Lösungen!