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

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

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では、アプリの独自のニーズに合わせて、AndroidiOS用の独自のネイティブコンポーネントを構築することもできます。また、これらのコミュニティ提供コンポーネントの活発なエコシステムもあります。Native Directoryをチェックして、コミュニティが作成しているものを確認してください。

コアコンポーネント

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

React Native UIコンポーネントAndroidビューiOSビューWebアナログ説明
<View><ViewGroup><UIView>スクロールしない<div>flexbox、スタイル、一部のタッチ処理、およびアクセシビリティコントロールを使用したレイアウトをサポートするコンテナ
<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.