React Native Props

A maioria dos componentes pode ser personalizado quando criados, com parâmetros diferentes. Esses parâmetros de criação são chamados props, abreviação de propriedades.
Por exemplo, um componente básico do React Native é o Image. Ao criar uma imagem, você pode usar um suporte nomeado source para controlar a imagem exibida.

import React, { Component } from 'react';
import { 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}}/>
    );
  }
}

Observe as chaves ao redor {pic} – elas incorporam a variável pic no JSX. Você pode colocar qualquer expressão JavaScript dentro de chaves no JSX.

Seus próprios componentes também podem ser usados props. Isso permite criar um único componente usado em muitos locais diferentes do seu aplicativo, com propriedades ligeiramente diferentes em cada local. Basta consultar this.props em sua função render. Aqui está um exemplo:

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

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

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

Usar name como suporte permite personalizar o Greeting componente, para que possamos reutilizá-lo para cada um de nossos cumprimentos. Este exemplo também usa o Greeting componente em JSX, assim como os componentes internos. O poder de fazer isso é o que torna o React tão legal – se você deseja ter um conjunto diferente de primitivos da interface do usuário para trabalhar, basta inventar novos.

A outra coisa nova acontecendo aqui é o View componente. A View é útil como um contêiner para outros componentes, para ajudar a controlar o estilo e o layout.

Com props e os básicos Text, Image e View componentes, você pode construir uma grande variedade de telas estáticas. Para saber como fazer seu aplicativo mudar com o tempo, você precisa aprender sobre o Estado.

Texto traduzido de https://facebook.github.io/react-native/docs/props