React-Native에서 세로로 텍스트 정렬

1. justifyContent 및 flex 속성을 사용하여 React-Native에서 텍스트를 세로로 중앙에 정렬
2. alignItems 및 flex CSS 속성을 사용하여 React-Native에서 텍스트를 세로로 중앙에 정렬

이 기사에서는 React-native에서 텍스트를 세로로 정렬하는 방법을 배웁니다. 아래 방법을 사용하여 텍스트뿐만 아니라 React-native의 모든 구성 요소를 정렬할 수 있습니다.

justifyContent 및 flex 속성을 사용하여 React-Native에서 텍스트를 세로로 중앙에 정렬

사용자는 모든 구성 요소의 CSS를 사용자 지정하고 세로로 정렬할 수 있습니다. CSS의 justifyContent 및 flex 속성을 사용하여 텍스트를 수직 중앙이나 하단 또는 다른 위치에 정렬할 수 있습니다.

아래 예제에서는 Text 구성 요소를 하위 구성 요소로 포함하는 View 구성 요소를 사용하여 컨테이너를 만들었습니다. 또한 center 스타일을 생성하여 View 구성 요소에 적용했습니다.

center 스타일에 flex: 1을 추가하여 View 구성 요소가 어떻게 성장해야 하는지를 나타냅니다. CSS flex 속성이 있는 View 구성 요소가 하나만 있으므로 높이가 100%이고 justifyContent: center는 flex에 따라 크기를 고려하여 View 구성 요소의 콘텐츠를 중앙에 배치합니다. 재산.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.center}>
      <Text>This is vertically Center Text.</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
  },
});

출력:

위의 출력에서 사용자는 텍스트가 수직으로 중앙에 정렬된 것을 볼 수 있습니다.

alignItems 및 flex CSS 속성을 사용하여 React-Native에서 텍스트를 세로로 중앙에 정렬

justifyContent CSS 속성인 alignItems를 사용하면 텍스트를 수직으로 중앙에 배치할 수도 있습니다. alignItems CSS 속성에 center 값을 사용하면 텍스트를 수직 중앙에 정렬합니다.

또한 사용자는 alignItems CSS 속성과 함께 속성을 사용하여 컨테이너가 확장되는 방식을 설정해야 합니다. 간단히 말해서 flex 속성은 구성 요소의 높이를 정의하고 alignItems 속성은 높이에 따라 텍스트를 정렬합니다.

아래 예에서는 두 개의 Text 구성 요소를 만들고 flexDirection: ‘row’ CSS를 상위 View 구성 요소에 적용하여 모든 Text 구성 요소를 단일 행에 표시했습니다.

또한 상위 View 구성 요소에는 구성 요소의 높이를 100%로 설정하는 flex:1 스타일과 텍스트를 세로로 중앙에 배치하는 alignItems: center 스타일을 적용했습니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "center", flex:1, }}>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>Hi</Text>{" "}
      </View>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>There</Text>{" "}
      </View>
    </View>
  );
}

출력:

사용자가 하단에 텍스트를 정렬하려면 alignItems CSS 속성 값을 flex-end로 변경하고 상단 변경 값을 flex-start로 변경해야 합니다.

하단에 텍스트를 정렬하려면 사용자는 아래 예제 코드를 따를 수 있습니다.

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "flex-end", flex: 1 }}>
      <Text style={{ fontSize: 30 }}>Text at bottom</Text>{" "}
    </View>
  );
}

출력:

위의 출력에서 사용자는 alignItems 값을 flex-end로 설정했기 때문에 텍스트를 맨 아래에 정렬하는 것을 볼 수 있습니다.

사용자는 이 문서에서 텍스트를 세로로 정렬하는 다양한 방법을 배웠습니다. 사용자는 justifyContent 또는 alignItems CSS 속성을 flex CSS 속성과 함께 사용할 수 있습니다.

여기서는 flex 속성만 사용하여 컨테이너 높이를 설정했습니다. 사용자는 높이를 수동으로 설정할 수도 있습니다.