[英]How can I efficiently render an Image Component in a React Native Header bar?
Overview概述
I am currently working on a React Native application that uses the React Navigation library.我目前正在开发一个使用 React Navigation 库的 React Native 应用程序。 From the React Navigation library, I'm using the navigationOptions property to create a Header component in each of my screens.
在 React Navigation 库中,我使用 navigationOptions 属性在我的每个屏幕中创建一个 Header 组件。 Each screen uses the exact same properties:
每个屏幕都使用完全相同的属性:
HomeScreen.navigationOptions = {
headerRight: (
<Ionicons
name={"md-menu"}
size={26}
style={{ marginBottom: -5, paddingRight: 15 }}
color={"#ccc"}
/>
),
headerTitle: (
<HeaderLogo/>
)
}
My Logo component is as such:我的 Logo 组件是这样的:
export default HeaderLogo = () => {
const logo = require("../../../assets/images/logo.png");
return (
<Image
style={{
resizeMode: "contain",
height: 40,
width: 85,
marginLeft: 85
}}
source={logo}
/>
)
}
The problem问题
The logo renders in the header correctly as expected;徽标按预期正确呈现在标题中; however, whenever I switch screens, the logo briefly disappears and reappears in a flash.
但是,每当我切换屏幕时,徽标会短暂消失并在瞬间重新出现。 Its noticeable and does not look good.
它引人注目,看起来并不好看。 I want the header to appear static no matter how many times I switch screens.
无论我切换屏幕多少次,我都希望标题显示为静态。 I'm assuming this has something to with the
require()
method, where its pulling the image everytime.我假设这与
require()
方法有关,它每次都拉图像。 My question is:我的问题是:
How can I efficiently use an Image component in my Header, such that the header appears static?如何有效地使用标题中的图像组件,使标题显示为静态?
Add headerMode: 'float'
to the navigationOptions
of the stack navigator that contains your screens.将
headerMode: 'float'
添加到包含屏幕的堆栈导航器的navigationOptions
。
From createStackNavigator
documentation:来自
createStackNavigator
文档:
headerMode
- Specifies how the header should be rendered:headerMode
- 指定应如何呈现标题:
float
- Render a single header that stays at the top and animates as screens are changed.float
- 渲染一个位于顶部的标题,并随着屏幕的变化进行动画处理。 This is a common pattern on iOS.这是 iOS 上的常见模式。
screen
- Each screen has a header attached to it and the header fades in and out together with the screen.screen
- 每个屏幕都有一个标题,标题与屏幕一起淡入淡出。 This is a common pattern on Android.这是 Android 上的常见模式。
none
- No header will be rendered.none
- 不会呈现标题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.