react native 學習筆記之Props

在IOS或者Android中，通常一個類都有成員變量和函數，成員變量也可以叫成員屬性。在props的例子程序中，可以

把Image看成系統定義好的類，而Greeting看成是我們自己定義的一個類，在react native中稱爲組件

（Component）。那麼這樣理解的話，source={pic} 就是給Image的成員變量source賦值了，只是react native的語法

需要用{}括起來。同樣就不難理解style={{width: 193, height: 110}}。

其它的可以參看我代碼中的註釋，可以幫助理解。

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

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' />  //給屬性（成員變量）name賦值
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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