如何修复 React Navigation 中的 ReactNavigation 错误

Question

我正在尝试实现本机反应导航，但出现错误“看起来你已经将 'Navigation Container' 嵌套在另一个...”

The Error Image for the First One

所以我尝试通过设置 independent={true} 来修复它，但它只是退出应用程序并且不会加载。所以我删除了 NavigationContainer 并收到错误消息“无法注册导航器。您是否使用 'Navigation Container' 包装了您的应用程序？”

The Error Image for the Second One

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

我该如何解决？如果有人可以提供帮助，那将非常有帮助，在此先感谢。

<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 Navigation 文档：

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

如何修复 React Navigation 中的 ReactNavigation 错误

How to fix ReactNavigation Error in react native

javascript

react-native

react-navigation