Layout with Flexbox
Desliza para mostrar el menú
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.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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.
¡Gracias por tus comentarios!