如何在React Native Header栏中高效地渲染图像组件？

Question

概述

我目前正在使用React导航库的React Native应用程序上工作。在React Navigation库中，我正在使用navigationOptions属性在每个屏幕上创建Header组件。每个屏幕使用完全相同的属性：

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

我的徽标组件就是这样：

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文档：

• createStackNavigator-指定标题的呈现方式：
  • headerMode-渲染停留在顶部的单个标题，并在更改屏幕时进行动画处理。这是iOS上的常见模式。
  • float-每个屏幕都有一个附加的标题，并且标题随屏幕一起淡入和淡出。这是Android上的常见模式。
  • screen-将不显示标题。