メインコンテンツへスキップ

コアコンポーネントとネイティブコンポーネント

React Nativeは、Reactとアプリプラットフォームのネイティブ機能を使用してAndroidおよびiOSアプリケーションを構築するためのオープンソースフレームワークです。React Nativeでは、JavaScriptを使用してプラットフォームのAPIにアクセスするだけでなく、Reactコンポーネント(再利用可能で入れ子可能なコードの束)を使用してUIの外観と動作を記述します。Reactについては次のセクションで詳しく説明します。しかし、まずReact Nativeでコンポーネントがどのように機能するかを説明しましょう。

ビューとモバイル開発

AndroidおよびiOS開発において、ビューはUIの基本的な構成要素です。画面上の小さな長方形の要素で、テキスト、画像を表示したり、ユーザー入力に応答したりするために使用できます。テキストの行やボタンのような、アプリの最小の視覚要素でさえ、一種のビューです。一部の種類のビューは、他のビューを含むことができます。すべてがビューなのです!

Diagram of Android and iOS app showing them both built on top of atomic elements called views.
AndroidおよびiOSアプリで使用されている多くのビューのほんの一部です。

ネイティブコンポーネント

Android開発ではKotlinまたはJavaでビューを記述し、iOS開発ではSwiftまたはObjective-Cを使用します。React Nativeでは、Reactコンポーネントを使用してJavaScriptでこれらのビューを呼び出すことができます。実行時に、React Nativeはこれらのコンポーネントに対応するAndroidおよびiOSビューを作成します。React NativeコンポーネントはAndroidおよびiOSと同じビューによって支えられているため、React Nativeアプリは他のアプリと同じように見え、感じられ、動作します。これらのプラットフォームでサポートされているコンポーネントをネイティブコンポーネントと呼びます。

React Nativeには、今日からアプリの構築を開始するために使用できる、すぐに使える必須のネイティブコンポーネントのセットが付属しています。これらがReact Nativeのコアコンポーネントです。

注意

このドキュメントは古いAPIセットを参照しており、新しいアーキテクチャを反映するために更新が必要です

React Nativeでは、アプリ独自のニーズに合わせてAndroidおよびiOS用の独自のネイティブコンポーネントを構築することもできます。また、これらのコミュニティ貢献コンポーネントの活気あるエコシステムもあります。Native Directoryをチェックして、コミュニティが何を開発しているかを確認してください。

コアコンポーネント

React Nativeには、コントロールからアクティビティインジケーターまで、あらゆるものに対応する多くのコアコンポーネントがあります。それらはすべてAPIセクションに文書化されています。主に以下のコアコンポーネントを使用します。

React Native UIコンポーネントAndroidビューiOSビューWebにおける類似物説明
<View><ViewGroup><UIView>スクロールしない<div>フレックスボックス、スタイル、一部のタッチ処理、アクセシビリティコントロールによるレイアウトをサポートするコンテナ
<Text><TextView><UITextView><p>テキスト文字列を表示、スタイル設定、ネストし、タッチイベントも処理します
<Image><ImageView><UIImageView><img>さまざまな種類の画像を表示します
<ScrollView><ScrollView><UIScrollView><div>複数のコンポーネントやビューを含むことができる汎用スクロールコンテナ
<TextInput><EditText><UITextField><input type="text">ユーザーがテキストを入力できるようにします

次のセクションでは、これらのコアコンポーネントを組み合わせてReactの動作について学びます。ここで試してみてください!


React NativeはReactコンポーネントと同じAPI構造を使用するため、ReactコンポーネントAPIを理解しておく必要があります。このトピックについては、次のセクションで簡単に紹介または復習できます。ただし、すでにReactに慣れている場合は、スキップしても構いません。

A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.A diagram showing React Native's Core Components are a subset of React Components that ship with React Native.