React Navigation5.x第五章配置導航頭

我們已經演示過如何設置導航頭的標題，現在我們一起來探討一下導航頭的其他設置。

設置導航頭的標題

Screen組件都有一個options屬性，這個屬性可能是一個js對象或者是一個返回js對象的方法。這個屬性包含了很多可配置的選項。而其中的title就是最常用的之一。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

在title中使用參數

爲了在title中使用參數，我們需要把options屬性定義爲一個返回配置對象的方法。很多人嘗試使用this.props來替代options。這個是錯誤的，因爲這個定義是在組件被渲染之前，所以不能用this來指代當前組件。如果我們將options定義爲一個方法，React Navigation就可以調用它併爲其傳入兩個可供使用的參數{navigation,route}。在本章中我們重點關注這個route。這個route與你傳入到路由頁面route屬性是同一個對象。這樣，通過再次訪問其route.params，我們就可以得到其中的參數了。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}

傳遞到options方法中的形參是一個對象，該對象有兩個屬性

• navigation  --  就是路由屏幕組件的navigation屬性
• route   --   屏幕組件的route屬性

上面的例子我們只用到了route屬性，但是在其他的場景中你可以根據需要使用navigation屬性。

使用setOptions更新options

有一個很常見的需求就是我們要在一個已加載的屏幕組件上更新它的options配置。對於這樣的需求我們可以使用navigation.setOptions來實現。

/* Inside of render() of React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

設置導航頭的樣式

關於自定義導航頭的樣式，有三個關鍵的屬性需要知道 headerStyle,headerTintColor,和headerTitleStyle

headerStyle:這個樣式對象可以設置包裹住導航頭的view的樣式。如果你爲其設置了背景色，那麼導航頭的背景色就是你設置的顏色

headerTintColor:回退按鈕和title都是使用這個屬性來設置他們的顏色。在下面的例子中，我們設置tint colot爲白色，所以回退按鈕和title就顯示的是白色。

headerTitleStyle:如果我們向自定義字體，字體粗細和其他文本樣式，我們就可以設置這個屬性。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>
  );
}

這裏有幾點需要注意：

在IOS上，狀態欄文本和圖標是黑色的，所以你將背景色設置爲暗色的話可能看起來不是很好。我們不在這裏探討這個問題，但是你應該知道配置狀態欄的背景色以便於跟你的導航頭的顏色不衝突。

以上的設置僅僅只在home頁面有效，當我們跳轉到details頁面的時候，依然會顯示默認的顏色。接下來我們就探討如何將iptions的設置共享給其他的屏幕組件。

與其他屏幕組件共享options

通常我們會用同樣的方式來設置多個頁面的導航頭。比如，你的公司的主題色是紅色，你想讓導航頭的背景色爲橘紅色，前景色爲白色。就像上面那張圖中所示的一樣，你會注意到當你跳轉到DetailsScreen頁面的時候，導航頭的顏色又變成了默認的。當然我們也可以將HomeScreen頁面的options同樣設置到DetailsScreen頁面上來實現這個，這樣實現是很糟糕的。幸運的是我們沒必要這麼做，我們可以使用堆棧導航器的screenOptions屬性。

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

在上面的例子中，任何屬於StackScreen的頁面都將會有相同樣式的導航頭了。

使用自定義的組件來替換title

有的時候你想對title做更多的設置，比如，你想在原title所在的位置渲染一張圖片，或者將title放進一個按鈕中，在這些場景中你完全可以使用自定義的組件來覆蓋title。

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

你可能想要問爲什麼使用 headerTitle 這個組件來替代title。原因就是headerTitle其實是堆棧導航器的一個屬性，默認情況下headerTtile是一個text組件，所以顯示的就是title文本內容。

其他的一些配置

你可以查看頁面的可用options列表來了解更多的配置選項。

總結

• 閱讀相關API的配置選項，通過設置這些options你可以自定義你的頁面組件中的導航頭。
• options屬性可以是一個對象或方法。當他是一個方法的時候他需要返回一個由navigation和route屬性的對象。
• 你可以通過設置screenOptions來爲堆棧導航器設置相同的導航頭，其優先級高於單獨配置。