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

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

ビューとモバイル開発

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

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セットを参照しており、New Architectureを反映するために更新される必要があります。

React Nativeでは、アプリ独自のニーズに合わせてAndroid用とiOS用の独自のネイティブコンポーネントを構築することもできます。また、コミュニティによって提供されるコンポーネントの活発なエコシステムもあります。Native Directoryをチェックして、コミュニティが作成したものを探してみてください。

コアコンポーネント

React Nativeには、コントロールからアクティビティインジケーターまで、さまざまなコアコンポーネントがあります。これらはすべてAPIセクションのドキュメントで確認できます。主に以下のコアコンポーネントを使用することになります。

React Native UIコンポーネント	Android View	iOS View	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に精通している場合は、先に進んでも構いません。