props.md

多くのコンポーネントは作成時にパラメーターを渡すことでカスタマイズできます。この作成時パラメーターをpropsといいます。

例えば、基本的なReact NativeコンポーネントのひとつにImageがあります。画像を作成する際に sourceというプロパティーを使うことで何の画像を表示するかコントロールできます。

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

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}}/>
    );
  }
}

AppRegistry.registerComponent('Bananas', () => Bananas);

JSXに変数picを埋め込むために{pic}とかっこで囲むことに気をつけてください。JSX中のカッコ内にはどんなJavaScriptも書けます。

あなたは自身のコンポーネント内でpropsを使うこともできます。これによってアプリ内のいろいろな場所で使える 単一コンポーネントを作ることができ、それぞれの場所で少しだけ違ったプロパティをもっています。 あなたのrender関数内でthis.propsを参照してください。以下が例です:

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

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

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

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

プロパティーとして name を使うことでGreetingコンポーネントをカスタマイズしていて、あいさつ一つ一つにコンポーネントを再利用できます。この例ではJSX内でGreetingコンポーネントをまるでビルトインのコンポーネントのように使っています。これを実現できるのがReactのクールなところです。 もし違ったUIセットが欲しくなったら、単に新しいものを作ってしまえばいいのです。

今回出た他の新規項目はViewコンポーネントです。Viewは他のコンポーネントのコンテナとして有用で、スタイルとレイアウトをコントロールできます。

propsと基本的なText、Image、Viewコンポーネントで、多種の静的画面を作成できます。時間でアプリを変更する方法について学ぶにはステートについて学ぶ必要があります。