View

View 컴포넌트를 사용해서 요소를 적절한 위치에 배치할 수 있어요. 예를 들어, 자식 요소들을 가로 방향으로 배치하고 싶은 경우 flexDirection 값을 row로 설정해야 해요.

아래 코드는 '안녕하세요, Bedrock이에요.' 라는 글자를 화면에 가로로 배치하는 예제에요.
flexDirection 의 기본값은 column이기 때문에 가로로 배치하려면 row로 설정해야 해요.

import { Text, View } from "react-native";

export default function TextPage() {
  return (
    <View style={{ flexDirection: "row" }}>
      <Text>안녕하세요</Text>
      <Text>Bedrock이에요.</Text>
    </View>
  );
}

요소 꾸미기

View 컴포넌트, Text의 style 속성에 값을 전달해서 요소를 꾸밀 수 있어요.
예를 들어, 배경색을 지정하거나 글자 크기를 키우거나 테두리를 설정할 수 있어요.

아래 코드는 Text 컴포넌트에 배경색(backgroundColor)을 지정하고, 글자 크기(fontSize)를 30으로 설정해요.
그리고 두 개의 Text 컴포넌트를 자식으로 갖는 View 컴포넌트의 테두리(border)를 검정색으로 설정하는 예제에요.

import { Text, View } from "react-native";

export default function TextPage() {
  return (
    <View
      style={{ flexDirection: "row", borderColor: "black", borderWidth: 1 }}
    >
      <Text
        style={{
          backgroundColor: "red",
          fontSize: 30,
        }}
      >
        안녕하세요
      </Text>
      <Text
        style={{
          backgroundColor: "blue",
          fontSize: 30,
        }}
      >
        Bedrock이에요.
      </Text>
    </View>
  );
}

같이 보기

• 요소 레이아웃 쉽게 적용하기