如何在 React Native 標題欄中有效地呈現圖像組件？

Question

概述

我目前正在開發一個使用 React Navigation 庫的 React Native 應用程序。 在 React Navigation 庫中，我使用 navigationOptions 屬性在我的每個屏幕中創建一個 Header 組件。 每個屏幕都使用完全相同的屬性：

HomeScreen.navigationOptions = {
  headerRight: (
    <Ionicons
      name={"md-menu"}
      size={26}
      style={{ marginBottom: -5, paddingRight: 15 }}
      color={"#ccc"}
    />
  ),
  headerTitle: (
    <HeaderLogo/>
  )
}

我的 Logo 組件是這樣的：

export default HeaderLogo = () => {
  const logo = require("../../../assets/images/logo.png");
  return (
      <Image
        style={{
          resizeMode: "contain",
          height: 40,
          width: 85,
          marginLeft: 85
        }}
        source={logo}
      />
  )
}

問題

徽標按預期正確呈現在標題中； 但是，每當我切換屏幕時，徽標會短暫消失並在瞬間重新出現。 它引人注目，看起來並不好看。 無論我切換屏幕多少次，我都希望標題顯示為靜態。 我假設這與require()方法有關，它每次都拉圖像。 我的問題是：

如何有效地使用標題中的圖像組件，使標題顯示為靜態？

Answer 1

將headerMode: 'float'添加到包含屏幕的堆棧導航器的navigationOptions 。

來自createStackNavigator文檔：

• headerMode - 指定應如何呈現標題：
  • float - 渲染一個位於頂部的標題，並隨着屏幕的變化進行動畫處理。 這是 iOS 上的常見模式。
  • screen - 每個屏幕都有一個標題，標題與屏幕一起淡入淡出。 這是 Android 上的常見模式。
  • none - 不會呈現標題。