コアコンポーネントとネイティブコンポーネント
React Nativeは、Reactとアプリプラットフォームのネイティブ機能を使用してAndroidおよびiOSアプリケーションを構築するためのオープンソースフレームワークです。React Nativeでは、JavaScriptを使用してプラットフォームのAPIにアクセスするだけでなく、Reactコンポーネント(再利用可能で入れ子可能なコードの束)を使用してUIの外観と動作を記述します。Reactについては次のセクションで詳しく説明します。しかし、まずReact Nativeでコンポーネントがどのように機能するかを説明しましょう。
ビューとモバイル開発
AndroidおよびiOS開発において、ビューはUIの基本的な構成要素です。画面上の小さな長方形の要素で、テキスト、画像を表示したり、ユーザー入力に応答したりするために使用できます。テキストの行やボタンのような、アプリの最小の視覚要素でさえ、一種のビューです。一部の種類のビューは、他のビューを含むことができます。すべてがビューなのです!
ネイティブコンポーネント
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に慣れている場合は、スキップしても構いません。