HOWTO · React Native
React Native での垂直方向の配置
このチュートリアルでは、React Native での垂直方向の配置について説明します。
React Native は、Android と IOS の両方でアプリを開発するために最もよく使用されるフレームワークの 1つです。 React Native アプリで作業する場合、アラインメントはアプリをよりユーザーフレンドリーにするために非常に重要です。
React Native での垂直方向の配置
React Native 要素で使用できる配置には、水平方向と垂直方向の 2 種類があります。 垂直配置では、flex-start、Center、および flex-end の 3つのプロパティを使用できます。
この記事では、React Native 要素を垂直方向に配置する方法を説明します。 また、必要な例と説明を提供することで、トピックをより簡単にします。
React Native 要素を配置するには、style に次の変更を加えるだけです。
React_Element_ID :{
justifyContent: 'center', // For aligning vertically
flex:1
}
わかりやすくするために例を挙げましょう。
React Native で要素を垂直方向に配置する例
以下の例では、React Native アプリで画像を垂直方向に配置する方法を示しました。 次のコードを見てみましょう。
// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Image, Text, View } from 'react-native';
// Our main function
export default function App() {
return ( // Creating the UI elements.
<View style={styles.container}>
<Text>Simple Image</Text>
<Image
style={styles.img}
source={{
uri: 'https://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
}}
/>
<StatusBar style="auto" />
</View>
);
}
// Providing all necessary styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
marginTop: 100,
},
img: {
width: 100,
height: 100,
},
});
上記の例で共有されている手順に関して、必要なすべての行の目的は既に指示されています。 アプリを実行すると、画面に次の出力が表示されます。
出力：
上記のコード例は React Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。
