コアコンポーネントとネイティブコンポーネント
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> | 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に精通している場合は、先に進んでください。