React Native使用useState布尔值实现响应式导航失效怎么解决

1. 取消注释状态修改函数 #

你当前代码中changeCheck函数处于注释状态，传递给DrawerContent的是undefined，无法触发状态更新，先取消这段注释：

function DrawerNavigate() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    // 取消下方代码注释
    const changeCheck = () => {
        setIsLoggedIn((prev) => !prev);
    };
    // 剩余原有代码保持不变
}

2. 修正DrawerContent的参数接收逻辑 #

React函数组件只有第一个参数是所有传入属性的集合，第二个参数是ref预留位，你之前把isLoggedIn、changeCheck放到第二个参数里自然拿不到值，同时修正变量拼写错误：

// 错误写法
// export function DrawerContent(props, { isLoggedIn, changeCheck }) {
// 正确写法
export function DrawerContent(props) {
    // 从第一个props参数里解构自定义传入的属性
    const { isLoggedIn, changeCheck } = props;
    const press = () => {
        // 修正拼写错误：原代码多写了字母n，变量名是isLoggedIn不是isLogginedIn
        console.log(isLoggedIn);
    };
    // 剩余原有代码保持不变
}

3. 调整判断逻辑匹配需求 #

你当前代码的判断逻辑和需求完全相反：需求是isLoggedIn为false时展示登录组件，为true时展示用户信息，现有代码写反了，调整如下：

// 错误写法
// <View>{isLoggedIn ? <LoginContent props={props} /> : <Text style={Styles.title}>User</Text>}</View>
// 正确写法
<View>{!isLoggedIn ? <LoginContent props={props} /> : <Text style={Styles.title}>User</Text>}</View>

内容的提问来源于stack exchange，提问作者Jason