React Native Web应用Header栏Logo不显示 如何用Flex布局实现定位

故障根因 #

• Logo不显示的核心原因是Header容器默认flexDirection: column（垂直排布子元素），你给导航栏设置了93%屏幕宽度，会将上方的Image元素挤压到无可用渲染高度，且Image未设置明确宽高约束，最终无法渲染。
• 现有的flex配置完全不符合「左Logo+右导航」的横向排布需求。

修改方案 #

直接替换以下三处代码即可实现需求：

1. 修改styles.header配置，改为横向排布+垂直居中

header: {
    height: screen.height * 0.1,
    width: screen.width,
    backgroundColor: "#fff",
    opacity: 0.7,
    // 新增以下两行，删除原来的alignItems、flexWrap配置
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12 // 可选，给左右加内边距避免贴边
},

2. 修改Image组件样式，增加宽高约束

<Image 
  source={logo} 
  style={{ 
    height: '70%', // 占Header高度的70%，可自行调整
    aspectRatio: 1, // 保持Logo宽高比，可根据实际Logo比例修改
    resizeMode: 'contain' 
  }}
/>

3. 修改styles.nav配置，让导航栏自动占满剩余横向空间

nav: {
    // 删除原来的width、marginBottom配置，新增flex:1
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-end",
},

额外注意 #

如果修改后还是不显示，先确认require('../img/logo-pb-alpha.png')的路径是相对于当前Header组件文件的相对路径，路径错误也会导致图片加载失败。

内容的提问来源于stack exchange，提问作者Foufi