React Nativeの重要なコアコンポーネント一覧と使い方を解説

React Nativeには、アプリ開発に欠かせない重要なコアコンポーネントがいくつか存在します。これらのコンポーネントは、実行されるプラットフォーム（Android・iOS・Webブラウザ）に応じて、自動的に対応するネイティブビューへと変換されます。

本記事では、主要なコアコンポーネントの一覧と、それぞれが各プラットフォームでどのようにマッピングされるのかを詳しく解説し、最後に実際のコード例をご紹介します。

React Nativeの主要コアコンポーネント

実装例

それでは、<View>、<Text>、<Image>、<ScrollView>、<TextInput> を組み合わせた実際に動作するサンプルコードを見ていきましょう。

これらのコンポーネントを使用するには、まず react-native から必要なコンポーネントをインポートします。

import { View, Text, Image, ScrollView, TextInput } from 'react-native';

Viewコンポーネントの基本構成

<View> コンポーネントは、テキストやボタン、画像などの要素をまとめて配置するための親コンテナとして主に使用されます。以下のように記述します。

<View>
    <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
    <Image
       source={{
          uri: 'https://www.tutorialspoint.com/react_native/images/logo.png',
       }}
       style={{ width: 311, height: 91 }}
    />
</View>

上記のコードでは、<View> の内部に <Text> と <Image> コンポーネントを配置しています。

すべてのコアコンポーネントを組み合わせた完全なサンプル

<ScrollView> は親コンポーネントとして機能し、<View>、<Text>、<Image>、<Button> など、他のReact Nativeコンポーネントを内包してスクロール可能な画面を実現します。

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
    return (
       <ScrollView>
          <Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
          <View>
             <Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
             <Image
             source={{
                 uri:'https://www.tutorialspoint.com/react_native/images/logo.png',
             }}
             style={{ width: 311, height: 91 }}
           />
        </View>
        <TextInput
          style={{
            height: 40,
            borderColor: 'black',
             borderWidth: 1
          }}
          defaultValue="Type something here"
         />
        </ScrollView>
    );
}
export default App;

このサンプルでは、<ScrollView> 内にウェルカムメッセージを表示する <Text>、テキストと画像を含む <View>、そしてユーザー入力を受け付ける <TextInput> を配置しています。

出力結果

上記のコードを実行すると、以下のような画面が表示されます。