时间戳

首页 > 解决方案 > 如何在本机反应中更新子组件的使用上下文变量

reactjs - 如何在本机反应中更新子组件的使用上下文变量

问题描述

我正在使用 useMemo 和 useContext 挂钩在我的 react native 应用程序中存储登录和注销状态。

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

上下文 js 文件如下所示：

import React from "react";

export const AuthContext = React.createContext();

我想从子组件更新showBottomNavigation（在 useMemo 对象中）。

我是这些概念的新手，任何建议如何更新showBottomNavigation并使用它。

标签： reactjsreact-nativereact-routerreact-hooksreact-navigation-bottom-tab

解决方案

您可以使用状态来更改值。您的子组件可以更改状态，进而可以更改上下文的值。

import { AuthContext } from "./src/app/context";



export default () => {
  const [isLoading, setIsLoading] = React.useState(true);
  const [userToken, setUserToken] = React.useState(null);
  const [userType, setUserType] = React.useState(null);
  const [fontsLoaded, setFontsLoaded] = React.useState(false);

  const [bottomNavigation, setBottomNavigation] = useState(false);
  
  
  const authContext = React.useMemo(() => {
    return {
      signIn: (userType) => {
        setUserToken("dummy");
        setUserType(userType);
      },
      signUp: () => {
        setIsLoading(false);
      },
      signOut: () => {
        setIsLoading(false);
        setUserToken(null);
      },
      showBottomNavigation: false
    };
  }, []);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);

  return (
    <AuthContext.Provider value={...authContext,showBottomNavigation:bottomNavigation }>
      <NavigationContainer>
        <RootStackScreen userToken={userToken} userType={userType}/>
        <Text onPress={()=>setBottomNavigation(true)}>Change Bottom Nav</Text>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

推荐阅读