Layout with Flexbox
Scorri per mostrare il menu
React Native uses Flexbox to control layout.
Flexbox helps you position elements on the screen.
The most important properties are:
flexDirection: layout direction;justifyContent: alignment on the main axis;alignItems: alignment on the cross axis.
Example:
import { View, Text, Image, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Profile</Text>
<View style={styles.row}>
<Image
source={{ uri: 'https://i.pravatar.cc/150' }}
style={styles.avatar}
/>
<View>
<Text style={styles.name}>Alex Johnson</Text>
<Text>Frontend Developer</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20
},
title: {
fontSize: 20,
marginBottom: 10
},
row: {
flexDirection: 'row',
alignItems: 'center'
},
avatar: {
width: 80,
height: 80,
marginRight: 10
},
name: {
fontSize: 18
}
});
Here, flexDirection: 'row' places items side by side, and alignItems: 'center' aligns them vertically.
Flexbox is essential because it controls how your layout looks on different screen sizes.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Layout with Flexbox
React Native uses Flexbox to control layout.
Flexbox helps you position elements on the screen.
The most important properties are:
flexDirection: layout direction;justifyContent: alignment on the main axis;alignItems: alignment on the cross axis.
Example:
import { View, Text, Image, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.title}>Profile</Text>
<View style={styles.row}>
<Image
source={{ uri: 'https://i.pravatar.cc/150' }}
style={styles.avatar}
/>
<View>
<Text style={styles.name}>Alex Johnson</Text>
<Text>Frontend Developer</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 20
},
title: {
fontSize: 20,
marginBottom: 10
},
row: {
flexDirection: 'row',
alignItems: 'center'
},
avatar: {
width: 80,
height: 80,
marginRight: 10
},
name: {
fontSize: 18
}
});
Here, flexDirection: 'row' places items side by side, and alignItems: 'center' aligns them vertically.
Flexbox is essential because it controls how your layout looks on different screen sizes.
Grazie per i tuoi commenti!