#react-navigation# 學習重點記錄

push 和 navigate的區別

1. push: 每次調用 push 時, 咱們會嚮導航堆棧中添加新路由。
2. navigate: 當你調用 navigate 時, 它首先嚐試查找具備該名稱的現有路由, 而且只有在堆棧上沒有一個新路由時纔會推送該路由。

返回

若是當前頁面能夠執行返回操做，則 stack navigator 會自動提供一個包含返回按鈕的標題欄（若是導航堆棧中只有一個頁面，則沒有任何可返回的內容，所以也不存在返回鍵）。

有時候你但願可以以編程的方式觸發此行爲，可使用 this.props.navigation.goBack() 。

在Android上，React Navigation 掛鉤到硬件的返回按鈕，並在用戶按下返回按鈕時觸發 goBack()方法，所以它的行爲與用戶指望的相同。

另外一個常見需求是可以跨越多個頁面返回

• 例如，若是你處在堆棧深處，上面有多個頁面，此時你想要將上面全部的頁面都銷燬，並返回第一個頁面。 在這種狀況下，咱們知道咱們要回到 Home ，因此咱們可使用 navigate('Home') ，或者使用 navigation.popToTop() ，它能夠返回到堆棧中的第一個頁面。

傳遞參數給路由

有2個知識點
1.須要將參數包裝成一個對象，做爲navigation.navigate方法的第二個參數傳遞給路由。如：

this.props.navigation.navigate('RouteName', {paramName: 'value'})

2.讀取頁面組件中的參數的方法：

-可使用this.props.navigation.getParam讀取參數
-也可使用 this.props.navigation.state.params做爲getParam的替代方案， 若是未指定參數，它的值是 null。因此使用getParam一般更容易，你沒必要處理這種狀況

配置標題欄

1.每一個頁面組件能夠有一個名爲navigationOptions的靜態屬性，它是一個對象或一個返回包含各類配置選項的對象的函數。 咱們用於設置標題欄的標題的是title這個屬性。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

createStackNavigator默認狀況下按照平臺慣例設置，因此在iOS上標題居中，在Android上左對齊。

2.調整標題樣式
定製標題樣式時有三個關鍵屬性：headerStyle、headerTintColor和headerTitleStyle。

headerStyle：一個應用於 header 的最外層 View 的 樣式對象， 若是你設置 backgroundColor ，他就是header 的顏色。
headerTintColor：返回按鈕和標題都使用這個屬性做爲它們的顏色。 在下面的例子中，咱們將 tint color 設置爲白色（#fff），因此返回按鈕和標題欄標題將變爲白色。
headerTitleStyle：若是咱們想爲標題定製fontFamily，fontWeight和其餘Text樣式屬性，咱們能夠用它來完成。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* render function, etc */
}

3.如何在頁面之間共享navigationOptions
將配置移動到 defaultNavigationOptions 屬性下的 stack navigator 中.

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen
    },
    {
        initialRouteName: "Home",
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);