Javascript 如何在React原生标题栏中高效地渲染图像组件？

概述

我目前正在开发一个使用React导航库的React本机应用程序。在React导航库中，我使用navigationOptions属性在每个屏幕中创建一个标题组件。每个屏幕使用完全相同的属性：

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

HomeScreen.navigationOptions={
头灯：(
),
标题：(
)
}

我的徽标组件如下所示：

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

export default HeaderLogo=（）=>{
const logo=require（“../../../assets/images/logo.png”）；
返回(
)
}

问题

徽标按预期正确呈现在标题中；但是，每当我切换屏幕时，徽标会短暂消失并在一瞬间重新出现。它很明显，看起来不太好。我希望标题显示为静态，无论我切换屏幕多少次。我假设这与

require（）

方法有关，它每次都会拉取图像。我的问题是:

---

如何有效地使用标题中的图像组件，使标题显示为静态？

将

headerMode:“float”

添加到包含屏幕的堆栈导航器的

导航选项中

从文件：


headerMode
-指定应如何呈现标题：

float
-渲染停留在顶部的单个标题，并在屏幕更改时设置动画。这是iOS上的常见模式
screen
-每个屏幕上都有一个标题，标题随屏幕一起淡入淡出。这是Android上的常见模式
none
-不会呈现任何标题


感谢您的建议@zaytrix，但这并没有解决问题。当我在屏幕之间导航时，我仍然看到图像组件刷新。为了确保，您可以尝试使用
headerMode:none
？如果确实完全移除了标题，则您正在正确设置
headerMode
，闪烁是由于
headerTransitionPreset
的交叉淡入效果造成的。如果是，请尝试设置
headerTransitionPreset:uikit
；如果这不能产生期望的结果，那么您必须手动创建一个容器，在导航器上方有一个标题，以获得真正的静态标题。