React Nativeのコアコンポーネントとは何ですか？

Question

Accepted Answer

React Nativeは、ネイティブUI要素にマップされる**コアコンポーネント**（**View**、**Text**、**Image**、**ScrollView**、**TextInput**など）のセットを提供します。これらはReact Native UIの基本的な構成要素であり、Web HTML要素の代わりに使用されます。 ## コアコンポーネント（vs Web HTML） ```text React Native uses its OWN components (mapping to native views), NOT HTML: VIEW → a container (like a

) — the basic layout building block TEXT → display text (ALL text must be inside a , unlike web) IMAGE → display images (local or remote) TEXTINPUT → text input field (like an ) SCROLLVIEW → a scrollable container FLATLIST → an efficient scrollable LIST (for long lists — renders lazily) TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas) BUTTON → a basic button ``` ## 例 ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (like a div) */} Ann {/* text MUST be in */} {}}> Submit ); } ``` ## Webとの主な違い ```text ✓ Use not

, not

/; ALL text must be in ✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling ✓ Touchables/Pressable for interactions (not onClick on divs) ✓ FlatList for long lists (efficient) — not mapping over everything ``` ## なぜ重要なのかコアコンポーネントを理解することはReact Native開発の基本です。なぜなら、**すべてのReact Native UIの構成要素である**から — コンポーネントを組み合わせてインターフェースを構築するため、これは必ず知るべき基礎知識です。 React Nativeは**独自のコンポーネント**を提供し、Web HTML要素ではなくネイティブビューにマップされます。**View**（divのようなコンテナ）、**Text**（すべてのテキスト用。テキストはすべてTextコンポーネント内に入れなければならないという重要なルール。Webとは異なります）、**Image**、**TextInput**、**ScrollView**、**FlatList**（長いリストの効率的なレンダリング）、touchables/**Pressable**（タップ処理）などの重要なコンポーネントを理解することが、React Native UIを構築するために必要です。 Webからの**主な違いを理解すること**は、Web/React開発者がReact Nativeに移行する場合に特に重要です：divの代わりにViewを使用し、p/spanの代わりにTextを使用する（すべてのテキストがText内というルール付き）、CSSクラス/ファイルではなくスタイルプロップでスタイリングする、onClickではなくtouchables/Pressableを使用してインタラクションを処理する、すべてを展開するのではなく**長いリストにはFlatListを使用する**（効率的/遅延レンダリング）など — これらの違いは、コアコンポーネントを理解することで解決される一般的な落とし穴です。コンポーネント（Reactのように）は構成されてUIを構築し、Viewがコアコンテナとなります。コアコンポーネントはすべてのReact Native UIの構成要素であり（インターフェースを構築するために絶えず使用します）、それらをどのように理解し、Web HTMLとどのように異なるかを理解することはReact Nativeアプリを構築するために基本的です（特にWeb開発者向け）。コアコンポーネントを理解することは、不可欠で基礎的なReact Native知識です — React Native UIの基本語彙です。インターフェースを構築するために必要であり、Web Reactの知識をネイティブコンポーネントモデルに適応させるために必要であり、React Native開発の中核的な能力です。