原文連結

我們已經知道如何自定義導航欄的樣式，現在我們讓其有感知！好吧，這可能有點過，我們讓其能響應觸控。

在導航欄加一個按鈕

與導航欄互動最普遍的做法是觸控title左邊或者右邊的按鈕。讓我們在header右邊新增一個按鈕吧！

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}
 

在navigationOptions中，this繫結的並不是HomeScreen的例項，所以我們不能呼叫setState或者任何例項的方法。這很重要因為header中的按鈕與header所在的screen互動是非常普遍的。所以我們接下來我們看看怎樣做。

Header 與screen component互動

在header按鈕中，獲取元件例項函式的方法最常用的就是使用params。我們將用一個經典的案例來說明：計時器。

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* 稍後再render函式中我們會顯示計數 */
}
 

React Native並不能保證你的screen元件再header之前被掛載。因為increaseCount引數是再componentDidMount中設定的，再navigationOptions中可能不可用。一般來說這不是問題因為如果回撥時null時，Button的onPress和Touchable元件什麼都不會做。如果你用了自定義的元件，也應該確保這一點。

作為setParams的備選方案，你可以使用狀態管理庫（redux或者mobx）

自定義返回鍵

createStackNavigator提供的返回按鍵隨著平臺不同而不同。iOS上包括按鈕已經旁邊的標籤，當標題適合可用空間的十九，標籤顯示上一個頁面的標題，否則顯示"Back"。

headerBackTitle 和headerTruncatedBackTitle屬性可以改變標籤的行為。

覆蓋返回鍵

任何一個可以返回的screen都會自動渲染返回鍵--換句話說，只要棧中有不知一個screen，返回鍵就會被渲染。

一般來說這是我們想要的。但是在某些情況下，上面提到的方法比那個不能滿足你的自定義返回按鈕，這樣你就可以使用headerLeft，就跟我們使用headerRIght一樣。leaderLeft屬性接受React元件，可以用該元件覆蓋返回鍵的點選行為。

Summary

• 你可以通過navigationOptions的headerLeft 和 headerRights屬性在header中設定按鈕 .
• 使用 headerLeft時返回按鈕時完全自定義的，但是如果你僅僅想要改變圖示或者圖片，也有其他方法— headerBackTitle, headerTruncatedBackTitle, 和headerBackImage.