react-native - 在抽屉导航器中制作自定义抽屉时“超出最大更新深度”
问题描述
在获取自定义抽屉以定位我的堆栈屏幕时遇到此问题:超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。(我根本没有使用类组件,所以我不知道是什么原因造成的。)
主要成分:
import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import Header from "./components/Header";
import NavigationDrawer from "./components/NavigationDrawer";
import Home from "./components/Home";
import Login from "./components/Login";
import Signup from "./components/Signup";
import GameNotes from "./components/GameNotes";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function StackNavigator() {
return (
<Stack.Navigator initialRouteName="Main" screenOptions={{ header: Header }}>
<Stack.Screen name="Main" component={Home} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator>
);
}
export default function ComponentContainer() {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Stack"
drawerContent={(props) => <NavigationDrawer {...props} />}
>
<Drawer.Screen name="Stack" component={StackNavigator} />
<Drawer.Screen name="GameNotes" component={GameNotes} />
</Drawer.Navigator>
</NavigationContainer>
);
}
NavigationDrawer 组件:
import React, { useContext } from "react";
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { UserContext } from "../contexts/UserContext";
import { LanguageContext } from "../contexts/LanguageContext";
import localeSelect from "../services/localeSelect";
import { login } from "../data/locales";
export default function NavigationDrawer({ navigation }) {
const { user } = useContext(UserContext);
const { language } = useContext(LanguageContext);
return (
<DrawerContentScrollView>
{!user && (
<>
<DrawerItem
label={localeSelect(language, login)}
onPress={navigation.navigate("Stack", { screen: "Login" })}
/>
</>
)}
</DrawerContentScrollView>
);
}
解决方案
改变这个:navigation.navigate("Stack", { screen: "Login" })
至:() => navigation.navigate("Stack", { screen: "Login" })
推荐阅读
- amazon-web-services - AWS 单点登录:限制同时登录
- django - Django:从链接表返回数据
- dependency-injection - 服务堆栈 IOC。AutoWire(this) 尝试注入未在 Container 中注册的公共属性
- bash - “语法错误:预期的操作数......”在正常工作的脚本中
- awk - 基于公共键在awk中合并3个文件
- python - 如何使用 pandas 读取并推送到 SQL 数据库中的文件不断获取数据
- python - Beautiful Soup - 在没有嵌套跨度的情况下获得顶部 div 标签
- json - 如何使用 vbscript 从 JSON 文件中获取值到变量中
- sql - LEFT JOIN 不会返回所有值
- java - Apache commons CSV 忽略 csv 文件中损坏或无效的记录并继续解析