Elemente in React Native ausrichten
In diesem Artikel werden wir sehen, wie wir React-Native-Elemente ausrichten und durch die Verwendung notwendiger Beispiele und Erklärungen verständlicher machen können.
Elemente in React Native ausrichten
Zum Ausrichten von Objekten stehen zwei Ausrichtungsarten zur Verfügung: Horizontal und Vertikal. Es gibt drei Eigenschaften für die horizontale Ausrichtung: Top, Center und button, und es gibt drei Eigenschaften für die vertikale Ausrichtung: Left, Center und Right.
Mit dem flex
können wir Elemente einfach mit der folgenden Syntax ausrichten.
Syntax:
container: {flex: 1
justifyContent: 'center', // For aligning vertically
alignItems: 'center', // For aligning horizontally
}
Verwenden Sie flex
, um die React-Native-Elemente auszurichten
// Importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View, ViewComponent, ViewPagerAndroidBase} from 'react-native';
// Our main function
export default function App() {
let img = './assets/image1.jpg'; // Declaring a variable that hold the image
// location
return (
<View style = {styles.container}><Text>This is a body aligned center<
/Text>
<View style={styles.container01}>
<Text>I am Left</Text>
<Image style = {styles.img} source =
{
require(img)
} />
<StatusBar style="auto" />
</View>
<View style={styles.container02}>
<Text>I am Center</Text>
<Image style = {styles.img} source =
{
require(img)
} />
<StatusBar style="auto" />
</View>
<View style={styles.container03}>
<Text>I am Right</Text>
<Image style = {styles.img} source = {
require(img)
} />
<StatusBar style="auto" /></View>
</View>);
}
const styles = StyleSheet.create({
// Providing some styles to the UI
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
margin: 50,
},
container01: {
flex: 1,
alignSelf: 'flex-start',
},
container02: {
flex: 1,
alignSelf: 'center',
},
container03: {
flex: 1,
alignSelf: 'flex-end',
},
img: {
width: 100,
height: 100,
},
});
Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen. Im Beispiel sind container01
, container02
und container03
das untergeordnete Element von container
.
Wenn Sie die App ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.
Ausgang:
Beachten Sie, dass der oben geteilte Code in React-Native
erstellt wurde und wir Expo-CLI
verwendet haben, um die App auszuführen.
Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.
LinkedInVerwandter Artikel - React Native
- Ändern Sie den App-Namen in React Native
- Axios GET-Header in React Native
- Dynamisches Bild in React Native
- For-Schleife in React Native
- Fügen Sie ein Bild in React Native ein