如何修复React Native中React Navigation的NavigationContainer嵌套报错

• 你在项目全局已经声明过一次NavigationContainer的前提下，又在当前组件中重复声明，触发了嵌套报错
• 你把Tab导航逻辑写在了Home组件内部，同时Tab导航又将Home设置为子页面，形成循环引用，这也是你添加independent={true}后应用闪退的核心原因

1. 首先找到项目入口文件（通常为App.js），全局仅保留一个NavigationContainer，包裹所有导航逻辑，示例代码如下：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './Home'; // 替换为你存放聊天列表代码的组件路径

const Tabs = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name="Chats" component={Home} />
        {/* 其他Tab页面可在此处追加 */}
      </Tabs.Navigator>
    </NavigationContainer>
  );
}

2. 修改你当前编写的Home组件代码，删除末尾的NavigationContainer和Tabs相关代码，仅保留页面布局内容即可，同时给最外层View添加flex:1属性避免布局高度异常，参考代码如下：

import { View, Text, ScrollView, StyleSheet } from 'react-native';
import Header from './Header'; // 替换为你的Header组件实际路径
import ChatList from './ChatList'; // 替换为你的ChatList组件实际路径

const styles = StyleSheet.create({
  // 保留你原本定义的样式代码即可
  thirdSec: {},
  textLeft: {},
  textRight: {}
})

export default function Home() {
  return (
    <View style={{backgroundColor: '#010101', flex: 1}}>
      <Header />
      <View>
        <Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
      </View>
      <View style={styles.thirdSec}>
        <View>
          <Text style={styles.textLeft}>Broadcast List</Text>
        </View>
        <View>
          <Text style={styles.textRight}>New Group</Text>
        </View>
      </View>
      <View
        style={{
          borderBottomColor: '#2b2b2d',
          borderBottomWidth: 1,
        }}
      />
      <ScrollView>
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
        <ChatList />
        <View
          style={{
            marginTop: 5,
            borderBottomColor: '#2b2b2d',
            borderBottomWidth: 1,
            marginHorizontal: 30
          }}
        />
      </ScrollView>
    </View>
  )
}

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