ReactNative View

📕Overview

https://reactnative.dev/docs/view
UI を構築するための最も基本的なコンポーネントである View は、フレックスボックス、スタイル、一部のタッチ処理、およびアクセシビリティ コントロールを備えたレイアウトをサポートするコンテナーです。 View は、UIView、<div>、android.view など、React Native が実行されているプラットフォームに相当するネイティブ ビューに直接マップします。

ビューは他のビュー内にネストされるように設計されており、任意のタイプの子を 0 個から多数持つことができます。

この例では、2 つのボックスを色で囲み、1 つのテキスト コンポーネントをパディングで行内に囲むビューを作成します。

🧷summary

公式のViewコンポーネントのコードを使って、カラーボックスとテキストを表示してみる。

import React from 'react';
import {View, Text} from 'react-native';

const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 100,
        padding: 20,
      }}>
      <View style={{backgroundColor: 'blue', flex: 0.3}} />
      <View style={{backgroundColor: 'red', flex: 0.5}} />
      <Text>Hello World!</Text>
    </View>
  );
};

export default ViewBoxesWithColorAndText;

App.tsxの不要なコードを消してコンポーネントを追加してビルドする。

import { View, Text } from "react-native";
import ViewBoxesWithColorAndText from "./components/ViewBoxesWithColorAndText";

export default function App() {
  return (
    <ViewBoxesWithColorAndText />
  );
}

🧑‍🎓thoughts

Viewというコンポーネントを使ってみましたがこれはHTMLでいうところのdivタグですかね。

役割としては:

UI を構築するための最も基本的なコンポーネントである View は、フレックスボックス、スタイル、一部のタッチ処理、およびアクセシビリティ コントロールを備えたレイアウトをサポートするコンテナーです。