React Native Expo项目布局不显示问题及解决方法咨询

云上老周

2026-7-27

解决Expo + Expo Router布局不显示的问题

核心问题分析

app目录下的index.js中定义的Home组件未返回JSX内容，组件无法渲染任何布局
根目录index.js的配置不符合expo-router的要求，错误导出了Home组件

具体修复步骤

1. 修正根目录`index.js`

根目录的index.js只需要负责引入expo-router的入口，不需要导出Home组件，修改为：

import 'expo-router/entry';

2. 修复app目录`index.js`的Home组件

确保Home组件返回有效的JSX内容，示例如下：

import { View, Text, StyleSheet } from 'react-native';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text>这是我的第一个Expo Router页面</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

3. 确认`_layout.js`的配置正确性

确保Stack路由配置正确，示例如下：

import { Stack } from 'expo-router';

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