React Native の基本概念

React Native の基本概念

React Native は、ウェブ用の React と同じ原則に基づいて構築されていますが、決定的な違いがあります。div や span のような HTML 要素をレンダリングする代わりに、React Native はネイティブプラットフォームのコンポーネントをレンダリングします。View コンポーネントを書くと、iOS では UIView、Android では Android View になります。これが React Native アプリをネイティブに感じさせる魔法です。

React Native のコアコンポーネントは、ネイティブ UI 要素に直接対応します。div の代わりに View、span や p の代わりに Text、img の代わりに Image を使用します。これらのコンポーネントはアプリケーションの構成要素です。ウェブの HTML 要素と同様に、組み合わせたりネストしたりして複雑なユーザーインターフェースを作成します。

React Native でのスタイリングは、CSS ではなく JavaScript で行います。CSS プロパティに似ているがキャメルケースを使用する JavaScript オブジェクトを使ってスタイルを記述します。例えば、CSS の background-color は React Native では backgroundColor になります。スタイルは style プロパティを介してコンポーネントに直接適用され、StyleSheet.create を使用して再利用可能なスタイルオブジェクトを定義できます。

ブリッジは、JavaScript をネイティブプラットフォームに接続するメカニズムです。React Native コードを記述すると、デバイス上の JavaScript エンジンで実行されます。ブリッジは、JavaScript スレッドとネイティブ UI スレッド間のメッセージのシリアル化を担当します。このアーキテクチャにより、UI がネイティブにレンダリングされる一方で、アプリのロジックを JavaScript で記述でき、両方の長所を活かせます。