React Native での垂直方向の配置

MD Aminul Islam 2023年6月21日
  1. React Native での垂直方向の配置
  2. React Native で要素を垂直方向に配置する例
React Native での垂直方向の配置

React Native は、Android と IOS の両方でアプリを開発するために最もよく使用されるフレームワークの 1つです。 React Native アプリで作業する場合、アラインメントはアプリをよりユーザーフレンドリーにするために非常に重要です。

React Native での垂直方向の配置

React Native 要素で使用できる配置には、水平方向と垂直方向の 2 種類があります。 垂直配置では、flex-startCenter、および 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 Vertical Align - 出力

上記のコード例は React Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。

著者: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

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 Alignment