React Navigation 6.XX 的问题

Question

我的主屏幕堆栈中有 3 个底部标签。第一个选项卡是主页，上面有一些按钮。单击每个按钮时，应该会显示一个新屏幕。到目前为止，它还没有奏效。我不断收到此错误：

The action 'NAVIGATE' with payload {"name":"ScreenName"} was not handled by any navigator.

Do you have a screen named 'ScreenName'?

这是我的导航器的概述：

StackNavigator -> Home Screen (BottomNavigator) -> HomeStackScreen(Stack Navigtor)...others are just screens in the bottom navigator for now

在代码中：

import * as React from 'react'
import { StatusBar, View, StyleSheet } from 'react-native'

import { NavigationContainer, Theme } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

import { navigationRef } from './NavigationService'

const Stack = createNativeStackNavigator()
const AuthStack = createNativeStackNavigator()
const BottomStack = createBottomTabNavigator()
const HomeStack = createNativeStackNavigator()

import Home from 'app/screens/Home'
import Notifications from 'app/screens/WearNotifications'

import ScanCloth from 'app/screens/ScanCloth'
import MyWardrobe from 'app/screens/MyWardrobe'

const HomeStackScreen = () => {  // problem occurs with the screens in this navigator
 return <HomeStack.Navigator
  screenOptions={{
    headerShown: false,
  }}
>
<HomeStack.Screen 
  name="Home"
  component={Home}
/>
<HomeStack.Screen 
  name="ScreenName"
  component={ComponentToDisplayOnClick}
/>
    <HomeStack.Screen 
  name="ScreenName"
  component={ComponentToDisplayOnClick}
/> 
  </HomeStack.Navigator>
}

 const LoggedInNavigator = () => (
 <BottomStack.Navigator
   screenOptions={() => ({
      tabBarStyle: {
          backgroundColor: '#1B1464',
          height: 65,
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          paddingBottom: 10,
          paddingTop: 10
      },
      headerShown: false,
      tabBarLabel: () => {return null}
  })}
>
  <BottomStack.Screen 
      name="HomeStack" 
      component={HomeStackScreen} 
      options={{
          tabBarIcon: ({color}) => (
              <View
                  style={styles.bottomNavCircle} 
              >
                <MaterialCommunityIcons
                  name="home"
                  color={color}
                  size={30}
                />    
              </View>
          )
      }}
  />
  ... other bottom tabs
 </BottomStack.Navigator>
 )

 const App: React.FC = () => {

 return (
   <NavigationContainer ref={navigationRef} >

    <Stack.Navigator 
       screenOptions={{
         headerShown: false,
       }}
     >
        <Stack.Screen
          name="UnAuthenticated"
          component={AuthNavigator}
        />
        <Stack.Screen
          name="Home"
          component={LoggedInNavigator}
        />
      </Stack.Navigator>
    </NavigationContainer>
 )
 }

 export default App

我做错了什么吗？我只想导航到主页上的另一个屏幕，这是底部导航器的第一个选项卡。还没有看到任何有用的文章，所有文章都展示了导航器的独立用例。

12 天前，我从 Flutter 背景开始使用 React Native。谢谢

Answer 1

我通过使用()=> 箭头函数延迟导航调用方法调用解决了这个问题。它现在可以导航，但是底部导航栏仍然存在。有没有办法隐藏导航的底部栏？谢谢