React NativeのProps（プロップス）とは？基本と使い方を実例で解説

Props（プロップス）とは、Reactコンポーネントを柔軟にカスタマイズするための「プロパティ」のことです。Propsの仕組みを活用すると、作成済みのコンポーネントにさまざまなパラメータを渡して再利用できるだけでなく、あるコンポーネントから別のコンポーネントへ情報を受け渡すこともできます。

ReactJSの経験がある方なら、Propsという概念はすでに馴染みがあるはずです。React Nativeでもまったく同じ考え方が使えます。

それでは、具体的な例を通してPropsの仕組みを見ていきましょう。

例1：React Nativeの組み込みコンポーネントにおけるProps

まずはImageコンポーネントの例から確認します。

<Image
    style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
/>

ここで指定している style と source が、ImageコンポーネントのProps（プロパティ）です。styleは幅や高さなどのスタイルを設定するために、sourceはユーザーに表示する画像のURLを指定するために使用します。この2つは、Imageコンポーネントに標準で組み込まれているPropsです。

URLを変数に格納し、その変数をsourceに渡すことも可能です。以下のように記述します。

let imgURI = {
    uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
    <View style={styles.container}>
        <Image style={styles.stretch} source={imgURI} />
    </View>
);

次の例は、組み込みのPropsを使ってシンプルな画像を表示する完全なコードです。

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";

const MyImage = () => {
    let imgURI = {
        uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
    };
    return (
        <View style={styles.container}>
            <Image style={styles.stretch} source={imgURI} />
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    }
});
export default MyImage;

例2：カスタムコンポーネントにおけるProps

Propsは、コンポーネント間で情報を受け渡すためにも利用できます。以下の例では、Student（学生）とSubject（教科）という2つのカスタムコンポーネントを作成しています。

まず、Subjectコンポーネントは次のとおりです。

const Subject = (props) => {
    return (
        <View>
        <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
        </View>
    );
}

このコンポーネントは引数としてpropsを受け取り、Textコンポーネント内でprops.nameとして名前を表示しています。続いて、StudentコンポーネントからSubjectコンポーネントへPropsを渡す方法を見てみましょう。

Studentコンポーネントは次のとおりです。

const Student = () => {
    return (
        <View>
            <Subject name="Maths" />
            <Subject name="Physics" />
            <Subject name="Chemistry" />
        </View>
    );
}

Studentコンポーネント内では、SubjectコンポーネントにnameというPropsを渡して使用しています。渡している値は「Maths（数学）」「Physics（物理）」「Chemistry（化学）」の3つです。nameに異なる値を渡すだけで、Subjectコンポーネントを何度でも再利用できるのがポイントです。

以下は、StudentコンポーネントとSubjectコンポーネントを使った動作例と、その出力結果です。

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

const Subject = (props) => {
    return (
        <View>
            <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
        </View>
    );
}
const Student = () => {
    return (
        <View>
            <Subject name="Maths" />
            <Subject name="Physics" />
            <Subject name="Chemistry" />
        </View>
    );
}
export default Student;

実行結果