我有一个底部标签栏,其中有一个需要从标签栏中“隐藏”的屏幕(例如,没有显示标签)。所以我创建了一个原生堆栈,并将该堆栈的初始屏幕设置为底部标签堆栈。但是,当我使用底部标签导航时,我收到以下错误:
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
我没有看到任何对故障排除有帮助的东西。如果我把嵌套导航器的底部标签nav out 去掉,它就能很好地工作。下面是我的设置:
主堆栈:
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;
1条答案
按热度按时间zpjtge221#
这不是导致比以前更多的渲染,而是说它渲染了比以前更多的钩子a-当你试图在不能使用钩子的地方使用钩子时,就可能发生这种情况,比如渲染回调。
从您发布的代码来看,这看起来像是罪魁祸首:
header选项接受一个回调函数,而不是一个组件。因此它需要: