React-Native에서 텍스트 정렬

이번 글에서는 React-native에서 왼쪽, 오른쪽, 가운데 등 다양한 위치에 텍스트를 정렬하는 방법에 대해 알아보겠습니다. 모바일 애플리케이션을 개발하는 동안 개발자는 매력적인 UI를 만들기 위해 항목을 정렬해야 하는 경우가 많습니다.

React-Native에서 텍스트를 중앙에 정렬

React-native에서 텍스트를 정렬하려면 간단한 CSS가 필요합니다. 구성 요소에 textAlign: center를 추가하면 항목이 중앙에 정렬됩니다.

사용자는 아래 구문에 따라 textAlign: center를 구성 요소에 추가할 수 있습니다.

<View style={styles.container}>
{/* Code for component */}
</View>
// style to center the itemsconst styles = StyleSheet.create({
  container: {
    textAlign: "center"
  },
});

아래 예에서는 일부 텍스트 구성 요소를 생성하고 단일 보기 구성 요소 내에 추가했습니다. View 컴포넌트에 container 스타일을 적용했습니다.

container 스타일에서 textAlign: center CSS 속성을 추가하여 View 구성 요소의 콘텐츠를 중앙에 배치하고 사용자가 출력에서 볼 수 있습니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Welcome to DelftStack!</Text>
      <Text>Welcome to DelftStack!</Text>
      <Text>Welcome to DelftStack!</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    backgroundColor: "#fff",
    textAlign: "center"
  },
});

출력:

React-Native에서 텍스트를 오른쪽으로 정렬

React-native에서 텍스트를 오른쪽으로 정렬하는 가장 간단한 방법은 textAlign: Right CSS 속성을 사용하는 것입니다. 또한 텍스트를 오른쪽에 정렬하는 다른 방법에 대해서도 설명합니다.

아래 예에서는 Text 구성 요소에 textAlign: right CSS 속성을 사용했으며 사용자는 출력에서 텍스트가 오른쪽에 정렬된 것을 볼 수 있습니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View>
      <Text>Normal Postion of the text.</Text>
      <Text style={styles.text}>Text is at Right</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    textAlign: "right"
  },
});

출력:

또한 사용자는 alignSelf CSS 속성을 사용하여 텍스트를 오른쪽으로 정렬할 수 있습니다. alignSelf CSS 속성 값으로 flex-end 값을 사용하면 텍스트를 오른쪽으로 정렬합니다.

사용자는 alignSelf CSS 속성을 사용하기 위해 아래 구문을 볼 수 있습니다.

<View>
   <Text style={{alignSelf: 'flex-end'}}>This is a Demo Text!</Text>
</View>

이제 우리는 단일 행의 일부 텍스트를 오른쪽에, 일부 텍스트를 왼쪽에 정렬하는 방법을 배웁니다.

아래 예에서는 View 구성 요소를 만들고 flexDirection: row를 CSS 속성으로 추가하여 하위 구성 요소를 단일 행에 정렬했습니다. 하위 구성 요소에서 요구 사항에 따라 textAlign CSS 속성을 추가했으며, 이를 통해 단일 행에서 일부 텍스트를 오른쪽으로, 일부는 왼쪽으로 정렬할 수 있습니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (

<View style={{flex: 1, flexDirection: 'row'}}>
  {/* align left*/}
  <View style={{flex: 1}}>
    <Text>Left Text</Text>
  </View>
  {/* align right*/}
  <View>
    <Text style={{textAlign: 'right'}}>Right Text</Text>
  </View>
</View>
  );
}

출력:

일반적으로 텍스트는 기본적으로 사용되므로 왼쪽에 정렬할 필요가 없습니다. 그래도 사용자가 텍스트를 왼쪽으로 정렬하려면 React Native에서 textAlign: left CSS 속성을 사용할 수 있습니다.

이 기사에서는 텍스트를 왼쪽과 오른쪽으로 정렬하는 방법을 배웠습니다. 또한 단일 구성 요소 또는 단일 행의 텍스트를 정렬하는 방법을 배웠는데, 이는 개발자가 텍스트 다음에 이미지를 단일 행에 배치하려는 경우 매우 유용합니다.