當前 RN 版本：0.49
操作環境：Windows 10

Props（屬性）是元件在被建立的時候就能夠使用的各種引數，通常是該元件被使用時傳遞過來的或者是該元件已經設定的預設引數。

傳遞屬性

我們有兩個檔案 App.js 和 MyView.js：

App.js：

import React, { Component } from 'react';
import MyView from './MyView';

export default class App extends Component<{}> {
  render() {
    return <MyView name="小明"
 
/>
  }
}

MyView.js：

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

export default class MyView extends Component {
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this.props.name}
    </Text>
  }
}

在 MyView 中我們渲染顯示一個文字元件，顯示的內容包含了傳遞過來的 name 屬性。在 App 中我們使用了 <MyView/>

預設屬性與格式檢查

當 MyView 沒有接受到傳遞的屬性時，我們可以設定預設屬性。修改程式碼如下：

export default class MyView extends Component {
  static defaultProps = {
    age: 12,
    sex: '男'
  }

  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this
 
.props.name}{'\n'}年齡{this.props.age}{'\n'}性別{this.props.sex}
    </Text>
  }
}

通過 static defaultProps = {} 這種固定的格式來給一個元件新增預設屬性。我們在 App 中只傳遞了一個 name，所以 age 和 sex 都會從預設屬性中讀取，效果如下：

屬性也可以設定格式檢查，在設定之前我們需要先通過控制檯匯入 prop-types。prop-types 是 fb 推出的專門用來做型別檢查的一個模組，以前整合在 React 中，後來被單獨拿了出來。

yarn add prop-types

然後在 MyView 中匯入：

import PropTypes from ‘prop-types’;

通過 static propTypes = {} 這種固定格式來設定屬性的格式，比如說我們將 age 設定為 number 型別：

static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string
  }

然後我們在 App 中故意傳遞一個 string 型別的 age：

render() {
    return <MyView
        name="小明"
        age="12"
    />
  }

再次執行就會彈出一個黃色的警告提示我們格式錯誤，age 期望是 number 型別，卻得到了 string 型別。

另外還可以設定必須要傳遞的屬性，修改如下：

static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }

PropTypes.string.isRequired 表示 sex 是必須要傳遞的 string 型別的屬性，由於 App 中只傳遞了 name 與 age，所以執行的時候會彈出下面的警告。不要忘記把 defaultProps 中的 sex 屬性刪除，有預設屬性值的話，是永遠不會有警告的。

延展操作符

延展操作符 ... 是 ES6 語法的新特性，具體的說明可以參考 ECMAScript 6 入門 。

我們修改程式碼如下：

App.js：

import React, {Component} from 'react';
import MyView from './MyView';

export default class App extends Component<{}> {
  render() {
    var params = {name: '小明', age: 12, sex: '男'}
    return <MyView {...params}/>
  }
}

我們定義了一個物件 params，它包含了好幾個屬性。{...params} 表示的是將 params 中所有的屬性傳遞給 MyView 。

MyView.js：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import MySecondView from './MySecondView';

export default class MyView extends Component {

  static defaultProps = {
    age: 22
  }

  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }

  render() {
    return <MySecondView {...this.props}/>
  }
}

這裡我們又通過 {...this.props} 將 MyView 獲取到的所有屬性傳遞給了 MySecondView 。

MySecondView：

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

export default class MySecondView extends Component {
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this.props.name}{'\n'}年齡{this.props.age}{'\n'}性別{this.props.sex}
    </Text>
  }
}

在 MySecondView 中，我們就可以使用 name、age 以及 sex 這些屬性了。執行效果和我們預想的一樣：

解構賦值

解構賦值也是 ES6 語法的新特性，極大的簡化了程式碼，增強了程式碼的可讀性。

在上面程式碼的基礎上，我們在 App 中如果只想把 params 的 name 和 sex 傳遞過去，可以有如下寫法：

export default class App extends Component<{}> {
  render() {
    var params = {name: '小明', age: 12, sex: '男'}
    var {name: name, sex: sex} = params;
    return <MyView
        name={name}
        sex={sex}
    />
  }
}

由於我們只傳遞了 name 和 sex，那麼 age 就顯示預設值了：

我們講一下這行程式碼的意思：

2 處是我們新定義的名為 name 和 sex 的新變數，而 1 處的 name 和 sex 代表的是 params 中的屬性，這行程式碼的意思是我們新定義了兩個變數 name 和 sex，它們的值分別是 params.name 和 params.sex 。並且在屬性名稱和變數名稱相同時，我們可以簡寫成如下形式：

var {name, sex} = params;