如何修复react native中的ReactNavigation Error

Question

我试图实现反应原生导航，我得到了错误"看起来你已经嵌套了一个'导航容器'在另一个…">

第一个的错误图像

所以我试图通过放置独立={true}来修复它，但它只是退出应用程序并且不加载。我删除了NavigationContainer然后我得到了错误"无法注册导航器"你是否用"导航容器"包装了你的应用程序?

第二个的错误图像

我的代码在这个问题的最后。导航容器位于代码的末尾。

我该如何修复它?如果有人能帮忙，那真的很有帮助，提前谢谢。

<View style={{backgroundColor: '#010101'}}>
<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>
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
</NavigationContainer>
</View>

Answer 1

我想这就是你想要的。

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Header } from 'react-native-elements';
import ChatList from './ChatList';
function Home() {
return (
<View style={{backgroundColor: '#010101'}}>
<Header
leftComponent={{ icon: 'menu', color: '#fff', iconStyle: { color: '#fff' } }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
<View>
<Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
</View>
<View>
<View>
<Text>Broadcast List</Text>
</View>
<View>
<Text>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>
);
}
const Tabs = createBottomTabNavigator();
function MyTabs() {
return (
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}

看看这个零食:

https://snack.expo.dev/@devsaeedhabibi navigationcontainer

如果答案没有帮助，

请查看React导航文档:

https://reactnavigation.org/docs/navigation-container/