React Nativeの公式ドキュメントを和訳してみる 3 - Props

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

おおよそのコンポーネントは作成時、別々のパラメーターでカスタマイズできます。この新規作成時のパラメーターをpropsと呼びます。

例えば、ReactNativeの基本コンポーネントの一つにImageがあります。画像を作成する際に、sourceと名付けたpropを使い表示する画像を制御できます。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

// Create React Native Appつかってたらこの行は飛ばす
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

{pic}が中括弧に囲まれていることに注目してください。picという変数をJSXに埋め込むためにこうなっています。JSX内には中括弧を使いJavaScriptを記述をすることができます。

独自に作成したコンポーネントにもpropsを使うことができます。そのため、たった一つのコンポーネントをアプリ内の様々な異なる場所で使い、それぞれの場所でプロパティを微妙に変化させていくことができます。this.propsをrenderファンクション内で参照するだけです。例をあげましょう。

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// Create React Native Appつかってたらこの行は飛ばす
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

propとしてnameを使うことでGreetingコンポーネントをカスタマイズすることができます。よって、このコンポーネントを挨拶のたびに再利用できます。この例はImageのような構築済みコンポーネントのようにJSX内でGreetingコンポーネントを使用しています。この強みによって、ReactはCoolになっています - もし異なるUIベースのセットを一緒に使いたいと思い立ったとしても、新しいコンポーネントをまた一つ作れば良いだけなのです。

他にも新しいことが起こっていますね。Viewコンポーネントです。Viewは他のコンポーネントを格納し、スタイルやレイアウトを調整するのに便利です。

propsと基本コンポーネントであるText, Image, Viewコンポーネントを使って、多種多様な静的な画面を作ることができます。時間ごとにアプリを変化させる方法を学ぶために、Stateについて学びましょう。