React native React检测到StackNavigator调用的挂钩顺序发生了变化

我用的是StackNavigator，inside TabNavigator，inside Drawer Navigator。 尝试重定向到嵌套堆栈，但返回错误

警告：React检测到StackNavigator调用的挂钩顺序发生了更改。这将导致错误和错误，如果不修复。有关更多信息，请阅读挂钩规则：

TypeError:undefined不是对象（正在计算'prevDeps.length'）

那是怎么回事？ 为什么它不重定向到主屏幕下的stack.screen

我的重定向：

<TouchableOpacity style={styles.accessButton} onPress={() => navigation.navigate('Home', {
        screen: 'Events'
      })}>

navigation.navigate（'Home'）{
屏幕：“事件”
})}>

My main.js（导航器）

返回(
}
>
{isApplicationLoaded&&BeforeLogin！=null&&(
)}
)

我的选项卡导航器：

return (
    <Tab.Navigator tabBarOptions={{showLabel: false}} lazy>
      <Tab.Screen name="Home" component={HomeNavigator}
        options={{
          tabBarIcon: ({size,focused,color}) => {
            return (
              <AntDesign name="home" size={39} color={colors.text} />
            );
          },
        }}
      />
      <Tab.Screen name="SearchNavigator" component={SearchNavigator}
        options={{
          tabBarIcon: ({size,focused,color}) => {
            return (
              <AntDesign name="search1" size={39} color={colors.text} />
            );
          },
        }}
      />
      <Tab.Screen name="FAQNavigator" component={FAQNavigator}
        options={{
          tabBarIcon: ({size,focused,color}) => {
            return (
              <AntDesign name="questioncircleo" size={39} color={colors.text} />
            );
          },
        }}
      />
      <Tab.Screen name="ContactNavigator" component={ContactNavigator}
        options={{
          tabBarIcon: ({size,focused,color}) => {
            return (
              <Feather name="phone" size={39} color={colors.text} />
            );
          },
        }}
      />
    </Tab.Navigator>
  )

返回(
{
返回(
);
},
}}
/>
{
返回(
);
},
}}
/>
{
返回(
);
},
}}
/>
{
返回(
);
},
}}
/>
)

还有我的家庭导航器：

const HomeNavigator = ({ navigation }) => {
  const Stack = createStackNavigator()
  const { t } = useTranslation()
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={headerStyle_1}
        name='Index'
        title={t('title.homepage')}
        component={HomepageController}
      />
      <Stack.Screen
        options={headerStyle_1}
        name='Events'
        title={t('title.events')}
        component={EventsController}
      />
    </Stack.Navigator>
  )
}

constHomeNavigator=（{navigation}）=>{
const Stack=createStackNavigator（）
const{t}=usetransformation（）
返回(
)
}

不应在HomeNavigator组件内创建堆栈。它应该在组件外部，否则您只是在每个渲染上创建一个新的堆栈对象。对不起，我无法理解。这怎么可能呢？如何将stack navigator放在tab.navigator组件中？请检查react navigation文档中的示例，并检查调用

createStackNavigator（）

的位置，抱歉，兄弟，无法找到差异，认真地说。我很难过。但即使我阅读了所有文档也无法理解。您在组件内部使用的是

const Stack=createStackNavigator（）

，而它应该在组件外部，但在同一个文件中。

const HomeNavigator = ({ navigation }) => {
  const Stack = createStackNavigator()
  const { t } = useTranslation()
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={headerStyle_1}
        name='Index'
        title={t('title.homepage')}
        component={HomepageController}
      />
      <Stack.Screen
        options={headerStyle_1}
        name='Events'
        title={t('title.events')}
        component={EventsController}
      />
    </Stack.Navigator>
  )
}