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.
フィードバックありがとうございます!
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
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.
フィードバックありがとうございます!