初探React-Native

props

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

以常見的基礎組件Image爲例，在建立一個圖片時，能夠傳入一個名爲source的prop來指定要顯示的圖片的地址，以及使用名爲style的prop來控制其尺寸。

e.g

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

class TianXin extends Component {
  render() {
    let pic = {
      uri: 'http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg'
    };
    return (
      <Image source={pic} style={{width: 200, height: 200}} />
    );
  }
}

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

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