React Native - Props

Props

大多数组件在被创建的时候就能被自定义，带不同的参数，这些创造参数被称为props。

例如，一个基本的React Native组件是一张图片，当你创建一张图片的时候，你可以用用一个叫source的prop来控制它要显示什么图片。

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

请注意{pic}是用括号括起来，把变量pic嵌入到JSX，你可以把任何括号里的JavaScript表达式放到JSX里。

您自己的组件也可以使用props。这可以让你在你app很多不同的地方使用你创建的单个组件，并在每个地方略有不同的属性，只要在你的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作为一个prop让我们自定义Greeting组件，可以让我们在每个问候中都使用这个组件。这个例子也使用JSX的Greeting组件，就像内置组件一样，这样做的是为了让React看起来更酷 - 如果你希望有一个不同的基本UI，你可以再建新的。

另外一个新事物就是View组件。一个View作为其他组件的容器，在协助控制样式（style）和布局（layout）方面是非常有用的。

用props和基本的Text，Image和View组件，您可以建立各种各样的静态画面。要了解如何让您的app随着时间而变化，你需要了解的State。