react native學習筆記（三）

Props（屬性）

大多數組件在建立時就可使用各類參數來進行定製。用於定製的這些參數就稱爲props（屬性）。

以常見的基礎組件Image爲例，在建立一個圖片時，能夠傳入一個名爲source的prop來指定要顯示的圖片的地址，以及使用名爲style的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);

譯註：在iOS上使用http連接的圖片地址可能不會顯示，參見這篇說明修改。

請注意{pic}外圍有一層括號，咱們須要用括號來把pic這個變量嵌入到JSX語句中。括號的意思是括號內部爲一個js變量或表達式，須要執行後取值。所以咱們能夠把任意合法的JavaScript表達式經過括號嵌入到JSX語句中。

自定義的組件也可使用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);

咱們在Greeting組件中將name做爲一個屬性來定製，這樣能夠複用這一組件來製做各類不一樣的「問候語」。上面的例子把Greeting組件寫在JSX語句中，用法和內置組件並沒有二致——這正是React體系的魅力所在——若是你想搭建一套本身的基礎UI框架，那就放手作吧！

上面的例子出現了同樣新的名爲View的組件。View 經常使用做其餘組件的容器，來幫助控制佈局和樣式。

僅僅使用props和基礎的Text、Image以及View組件，你就已經足以編寫各式各樣的UI組件了。要學習如何動態修改你的界面，那就須要進一步學習State（狀態）的概念。