Expo Router多页面重复显示notifications.tsx内容问题求助

问题描述 #

使用Expo Router开发React Native项目时，notifications.tsx页面的内容重复出现在accountPrivacy.tsx、security.tsx、appPermissions.tsx等多个页面中，所有页面均显示Notifications页面的内容，而非各自独有的内容。

相关代码 #

_layout.tsx #

import { Stack } from "expo-router";

export default function Layout() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="userSettings" options={{ headerShown: false }} />
            <Stack.Screen name="notifications" options={{ headerShown: false }} />
            <Stack.Screen name="accountPrivacy" options={{ headerShown: false }} />
            <Stack.Screen name="security" options={{ headerShown: false }} />
            <Stack.Screen name="dataManagement" options={{ headerShown: false }} />
            <Stack.Screen name="appPermissions" options={{ headerShown: false }} />
        </Stack>
    );
}

notifications.tsx #

import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function notifications() {
    const settingsPage = () => {
        router.push("/settings/userSettings");
    };

    return (
        <View style={styles.container}>
            <View style={styles.navigationBar}>
                <TouchableOpacity onPress={settingsPage} style={styles.backButton}>
                    <Ionicons name="chevron-back" size={30} color="#fff" />
                </TouchableOpacity>
            </View>
            <Text>Hello from Notifications.</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000',
        marginTop: 20
    },
    backButton: {
        position: 'absolute',
        left: 15,
        justifyContent: 'center',
        height: '100%',
    },
    navigationBar: {
        width: '100%',
        height: 60,
        backgroundColor: '#000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 10,
    }
});

accountPrivacy.tsx、security.tsx等文件结构与notifications.tsx类似，但未显示自身独有的内容。

可能原因 #

• 组件导出错误：其他页面文件复制notifications.tsx后，未修改导出的组件函数名，导致多个页面导出同一个notifications组件。
• 文件命名/路径冲突：文件名大小写不匹配（如实际文件为Notifications.tsx但路由配置写notifications），或文件存放路径错误，导致路由匹配到错误的文件。
• 开发服务器缓存：Expo开发服务器缓存了旧的组件内容，修改文件后未更新。
• 路由跳转逻辑错误：跳转页面时使用了错误的路由路径，始终指向notifications页面。

解决步骤 #

1. 检查页面组件导出
   打开accountPrivacy.tsx等文件，确保导出的是当前页面的专属组件，而非notifications函数：

   // accountPrivacy.tsx 示例正确导出
   export default function AccountPrivacy() {
     const backToSettings = () => router.push("/settings/userSettings");
     return (
       <View style={styles.container}>
         <View style={styles.navigationBar}>
           <TouchableOpacity onPress={backToSettings} style={styles.backButton}>
             <Ionicons name="chevron-back" size={30} color="#fff" />
           </TouchableOpacity>
         </View>
         <Text>Hello from Account Privacy.</Text>
       </View>
     );
   }
   

2. 验证文件命名与路径

   • 确保所有页面文件名与_layout.tsx中Stack.Screen的name属性完全一致（区分大小写）。
   • 确认所有页面文件都位于当前_layout.tsx所在的目录下（如settings/目录），路径无错误。

3. 清除缓存重启服务器
   停止当前开发服务器，执行以下命令清除缓存并重启：

   npx expo start -c
   

4. 检查路由跳转代码
   确认跳转到目标页面的代码使用了正确的路由路径，例如：

   // 正确跳转到accountPrivacy
   router.push("/settings/accountPrivacy");
   

5. 排查路由配置重复
   检查项目中是否存在其他_layout.tsx文件重复注册了相同的路由名称，确保每个路由名称唯一。

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