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
を使用してアプリを実行していることに注意してください。
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.
LinkedIn関連記事 - React Native
- React Native Box Shadow
- React Native setTimeout メソッド
- React Native View onPress
- React Native でグローバル変数を使用する
- React Native でのストレージ
- React Native でのテキスト ラップ