Expo Router布局疑问：如何用全局布局包裹Stack实现复用

一、全局布局样式不生效的修复 #

你当前_layout.tsx里的SafeAreaView未设置占满屏幕的规则，导致背景样式仅局部生效。同时要确保StatusBar配置正确，子页面不要用不透明背景覆盖全局布局。

修改app/_layout.tsx：

import { SafeAreaView, StyleSheet, StatusBar } from 'react-native';
import { Slot } from 'expo-router';

export default function RootLayout() {
  return (
    <>
      <StatusBar style="dark" hidden={false} />
      <SafeAreaView style={styles.container}>
        <Slot />
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // 核心：让SafeAreaView占满整个屏幕高度
    backgroundColor: '#f5f5f5', // 设置全局背景色
  },
});

同时调整子页面根容器样式，避免覆盖全局背景：

// app/index.tsx 或 (screens)/index.tsx
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { router } from 'expo-router';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Title</Text>
      <TouchableOpacity onPress={() => router.push("/about")}>
        <Text>Start</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // 不要设置backgroundColor，或设为transparent
  },
});

二、路由配置错误导致内容不渲染的修复 #

你在index.tsx直接写<Stack>不符合Expo Router的规则，路由分组的导航结构应该在分组内的_layout.tsx中配置，根_layout.tsx仅负责全局布局。

调整文件结构：

app/
├── _layout.tsx       # 全局布局容器
├── (screens)/
    ├── _layout.tsx   # 屏幕分组的路由配置
    ├── index.tsx     # 首页
    ├── about/
        └── index.tsx # 关于页

配置(screens)/_layout.tsx：

import { Stack } from 'expo-router';

export default function ScreensLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: '首页' }} />
      <Stack.Screen name="about/index" options={{ title: '关于' }} />
    </Stack>
  );
}

此时可以删除根目录下的index.tsx，Expo Router会自动识别(screens)分组内的路由页面。

三、全局布局复用的正确方式 #

通过上述配置，根_layout.tsx的SafeAreaView会自动包裹所有屏幕页面，无需再给每个屏幕单独引入MainLayout。如果需要添加全局头部、底部导航等通用元素，直接在根_layout.tsx的Slot上下方插入即可：

// app/_layout.tsx
import { SafeAreaView, StyleSheet, StatusBar, View, Text } from 'react-native';
import { Slot } from 'expo-router';

export default function RootLayout() {
  return (
    <>
      <StatusBar style="dark" hidden={false} />
      <SafeAreaView style={styles.container}>
        {/* 全局头部 */}
        <View style={styles.header}>
          <Text>全局标题栏</Text>
        </View>
        <Slot />
        {/* 全局底部导航 */}
        <View style={styles.footer}>
          <Text>全局底部栏</Text>
        </View>
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  footer: {
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
});

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