TOP

BLOG

技術研究ブログ

【React Native】Propsとは?

【React Native】Propsとは?

2020-01-20

はじめに


今回は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を使用しない場合

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

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

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

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

結論


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

次回

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

参考


他の記事へ