【React Native】Propsとは？

はじめに

---

今回はPropsについて説明していきます。Propsは簡単にいうとComponentをカスタマイズするための機能のことです。

Componentについては前回の記事をご覧ください。

【React Native】Componentとは？

React NativeのComponentでPropsを使う

---

React NativeのComponentはドキュメンテーションからPropsのリストが見ることが出来き、とても便利です。今回はImageのComponentを使用し、Propsはsourceとstyleを使います。

React Native ドキュメンテーション：Image-props

■参考コード

下記のコードは画像を2枚表示しています。このようにPropsの値によって表示されるものを変えることが出来ます。React Nativeのドキュメンテーションを参考にして少し修正しました。

React Native ドキュメンテーション：Props

■Source

sourceの使い方の一つはオブジェクトのuriプロパティを代入することです。つまり、sourceの値は下記のようなJavaScriptオブジェクトです。

source = {{ uri: 'https://…' }}

■Style

styleはほとんどのReact NativeのComponentで使えるPropsです。Imageの場合はwidthとheightを代入したらImageの大きさを決めることが出来ます。

style = {{ width: 193, height: 110 }}

カスタムComponentでPropsを使う

---

React NativeのComponent(Imageなど)と同じようにカスタムComponentもPropsが使えます。

■Propsの使い方

Componentを定義する際に、this.propsでPropsの値を使うことができます。

this.props.props名

例えば、下記のComponentはCのクラスのrender()からthis.propsが使えます。

import React, { Component } from 'react';

export default class testAAA extends Component {
  render() {
    return (
      //カスタムComponent「C」を使用、代入しているProps「a="y" b="z"」
      <C a="y" b="z"></C>
    );
  }
}

//カスタムComponent「C」を定義
class C extends Component {
	render() {
		console.log(this.props);
		return null;
	}
}

//console.logの値：　{a: "y", b: "z"}

Hello, 〇〇〇!が表示できるComponentクラスを作る

---

■参考コード

下記のコードのようにHelloのクラスを3回使ってnameが毎回違うようにできます。

■名前を可変にできるComponentクラスを作成

人の名前は色々あるので、名前を可変にできるComponentクラスを作ります。人の名前はカスタマイズしたい値なのでPropsの値を使います。Props名はnameにしています。

class Hello extends Component {
  render() {
    return (
      //this.propsからPropsの値が使える
      <Text>Hello, {this.props.name}!</Text>
    );
  }
}

■Propsを代入する

Propsが使うクラスを作ったので、nameのPropsを代入しましょう。HelloのComponentクラスでthis.props.nameを使っているのでその値を代入する下記のコードを記述します。 ``````

補足：StyleSheetを使用しない記述方法

---

React Nativeの例コードを見たらStyleSheetが使われていることが多いですが、StyleSheetを使用しなくても実装できます。

さて、どちらの方がいいでしょうか。

■StyleSheetを使用した場合

■StyleSheetを使用しない場合

上記２つの結果を見ると、表示される画像の大きさは同じでした。

StyleSheet.createの値を確認したところ、下記のようなオブジェクトで、98と99はスタイルのIDになっていました。

//StyleSheet.createの値
{
	pic1: 98
	pic2: 99
}

２つの方法を調べてみましたが、今はStyleSheetを使っても使わなくても結果は同じです。（2020.01 現在）しかし、将来的にStyleSheetは処理スピードが速くなると予想されているので、StyleSheetを使うことをお勧めします。

結論

---

PropsはComponentをカスタマイズするための機能です。Componentはいつも同じでしたらあまり便利ではないので、必要に応じてPropsの値を代入してカスタマイズ出来ます。

次回

ComponentやPropsはカスタマイズできますが、表示している間に変更する場合はstateということが必要です。次回はstateについて説明します。

 

参考

---

• ドキュメンテーション
• ドキュメンテーション：日本語翻訳（一部）
• StyleSheetはメリットがある？

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください