React Native基礎：3-屬性Props

大部分封裝好的組件，都可以通過設置它們的屬性Props來定制界面和行為。比如Text組件有一個numberOfLines屬性，這個屬性控制組件顯示幾行。如下面的代碼所示，如果設置該屬性的值為2，那么無論文字的內容有多少，Text組件最多會顯示兩行文本。

<Text numberOfLines=2> 不論文字有多少，最多顯示2行，...<Text>

Props是組件對外提供的一個窗口，用來和外界進行溝通?，F在我們來自定義一個Hello組件，在AwesomeProject項目的index.ios.js文件中添加如下代碼。

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

class Hello extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Hello name="99iOS"/>
        <Hello name="shixin"/>
        <Hello name="hugo"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
},
});

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

在上面的示例代碼中，使用了一樣新的名為View的組件。View 常用作其他組件的容器，用于幫助控制布局和樣式。另外，在代碼中我們還使用到了樣式，這個在后面的內容中會重點介紹。

我們自定義了一個Hello組件，在屏幕上繪制“Hello xxx!”的一段話。而xxx的具體值是在使用組件的地方通過屬性name傳遞進來的。上面的示例代碼中，在View內有三個Hello組件, 并且分別設置了它們的name屬性。

        <Hello name="99iOS"/>
        <Hello name="shixin"/>
        <Hello name="hugo"/>

代碼更新完成后，在終端中輸入react-native run-ios命令，運行代碼，耐心的等待應用的編譯運行，最終會看到下面的效果。

下一節我們會學習一下React Native中的State（狀態），State和Props最大的區別是Props不能在組件內部被修改，而State可以。

---