Expo中Stack.Screen内容不显示求助：ScreenHeaderBtn无法展示

核心问题 #

你错误地在页面组件内部直接渲染了<Stack.Screen>，这不符合Expo Router的用法规范。Expo Router的<Stack.Screen>是路由栈的配置组件，应该放在全局路由配置文件（比如app/_layout.tsx）中，而非页面组件内部。页面里直接写这个组件不会生效，所以Header部分完全不显示，只有下方的ScrollView内容正常渲染。

正确实现方式 #

在页面组件中，需要通过useLayoutEffect结合router.setOptions来配置Header选项，而非直接使用<Stack.Screen>。

修改后的完整代码 #

import { useState, useLayoutEffect } from 'react';
import { View, ScrollView, Text, SafeAreaView, Button } from 'react-native';
import { useRouter } from 'expo-router';
import { COLORS, FONT, SIZES, images, icons } from '../constants';
import { Nearbyjobs, Popularjobs, Welcome, ScreenHeaderBtn } from '../components';
import { setStatusBarBackgroundColor } from 'expo-status-bar';
import 'react-native-gesture-handler';

const Home = () => {
  const router = useRouter();

  // 在组件挂载时配置Header选项
  useLayoutEffect(() => {
    router.setOptions({
      headerStyle: { backgroundColor: COLORS.red },
      headerShadowVisible: false,
      headerLeft: () => (
        <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
      ),
      headerRight: () => (
        <ScreenHeaderBtn iconUrl={icons.profile} dimension="100%" />
      ),
      headerTitle: ""
    });
  }, [router]);

  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: COLORS.lightWhite
      }}
    >
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ flex: 1, padding: SIZES.medium }}>
          <Welcome />
          <Popularjobs />
          <Nearbyjobs />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default Home;

依赖确认 #

你已经导入了expo-router的相关模块，确保以下依赖已正确安装（如果没有，执行安装命令）：

npx expo install expo-router react-native-screens react-native-safe-area-context

额外说明 #

如果需要全局配置路由栈，应该在app/_layout.tsx中使用<Stack>组件包裹路由，示例如下：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="home" options={{ /* 全局默认Header配置 */ }} />
      {/* 其他路由页面 */}
    </Stack>
  );
}

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