reactjs - 在嵌套堆栈导航器中的 BottomTabBar 中导航会导致比以前更多的渲染

Question

我有一个底部选项卡栏，其中有一个屏幕需要从选项卡中“隐藏”(例如，不显示选项卡)。因此，我创建了一个 native 堆栈，并将该堆栈的初始屏幕设置为底部选项卡堆栈。但是 - 当我使用底部选项卡导航时，我收到此错误:

Error: Rendered more hooks than during the previous render.

This error is located at:
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by BottomTabs)
    in BottomTabs (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by MainStack)
    in MainStack (created by App)
    in RNCSafeAreaView (created by App)
    in $29383e587d62412a$export$9f8ac96af4b1b2ae (created by NativeBaseProvider)
    in ToastProvider (created by NativeBaseProvider)
    in PortalProvider (created by NativeBaseProvider)
    in HybridProvider (created by NativeBaseProvider)
    in ResponsiveQueryProvider (created by NativeBaseProvider)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by NativeBaseProvider)
    in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
    in NativeBaseProvider (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in promptdrinksMobile(RootComponent), js engine: hermes

我没有看到任何真正有助于排除故障的内容。如果我将底部选项卡导航从嵌套导航器中取出，它会完美地工作。这是我的设置:

主堆栈:

import { createNativeStackNavigator } from '@react-navigation/native-stack'

// Stack imports
import BottomTabs from './BottomTabNavigator'

// Screen imports
import DetailScreen from '../screens/DetailScreen'

const Stack = createNativeStackNavigator()

const MainStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="BottomTabNavigator" component={BottomTabs} />
      <Stack.Screen name="DetailPage" component={DetailScreen} />
    </Stack.Navigator>
  )
}

export default MainStack

底部选项卡堆栈:

import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

// Config imports
import { siteVars } from '../config/siteConfig'

// Component imports
import TabItem from '../components/tab_bar/TabItem'

// Screen imports
import Home from '../screens/Home'
import Generated from '../screens/Generated'
import Settings from '../screens/Settings'

// Components
import Header from '../components/layout/Header'

// Stores

const Tab = createBottomTabNavigator()

const BottomTabs = () => {
  return (
    <Tab.Navigator
    initialRouteName={siteVars.generatedName}
      sceneContainerStyle={{flexGrow: 1}}
      screenOptions={{
        header: Header,
        tabBarShowLabel: false,
        tabBarStyle: {
          height: 20,
          paddingTop: 30,
          paddingBottom: 35
        }
      }}
    >
      <Tab.Screen 
        name="Home" 
        component={Home}
        options={{
          tabBarIcon: (props) => <TabItem {...props} alt="Home icon" name="Home" logo={require('../assets/logos/home.png')} />
        }}
      />
      <Tab.Screen 
        name={siteVars.generatedName} 
        component={Generated} 
        options={{
          tabBarIcon: (props) => <TabItem {...props} alt="Generated Icon" name={siteVars.generatedName} logo={require('../assets/logos/generated_logo.png')} />
        }}
      />
      <Tab.Screen
        name={"Settings"}
        component={Settings}
        options={{
          tabBarIcon: (props) => <TabItem {...props} alt="Generated Icon" name={"Settings"} logo={require('../assets/logos/settings.png')} />
        }}
      />
    </Tab.Navigator>
  )
}

export default BottomTabs

我的应用程序文件:

/**
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { Modal, NativeBaseProvider, StatusBar } from 'native-base'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'

// Tabs and Navigators
import BottomTabs from './src/navigators/BottomTabNavigator'
import MainStack from './src/navigators/MainStackNavigator'

// Styles and Themes
import theme from './src/styles/theme'

const App = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <NativeBaseProvider theme={theme}>
            <SafeAreaView edges={['top', 'right', 'left']} style={{flexGrow: 1, backgroundColor: '#333'}}>
              <StatusBar barStyle="light-content" />
                <MainStack />
            </SafeAreaView>
        </NativeBaseProvider>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

export default App;

Answer 1

它并没有导致比以前更多的渲染，而是说它比以前渲染了更多的钩子(Hook) - 当您尝试在无法使用钩子(Hook)的地方(例如渲染回调)时，可能会发生这种情况。

从您发布的代码来看，这看起来像是罪魁祸首:

header: Header,

header 选项采用回调函数，而不是组件。所以它需要是:

header: (props) => <Header {...props} />,