Reactjs 如何从react native中的子组件更新use上下文变量

我使用useMemo和useContext钩子在我的react本机应用程序中存储登录和注销状态

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>
  );
};

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

---

我不熟悉这些概念，任何关于如何更新showBottomNavigation并使用它的建议。

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

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>
  );
};

import{AuthContext}来自“/src/app/context”；
导出默认值（）=>{
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.useMoom（（）=>{
返回{
登录：（用户类型）=>{
setUserToken（“虚拟”）；
setUserType（userType）；
},
注册：（）=>{
设置加载（假）；
},
注销：（）=>{
设置加载（假）；
setUserToken（null）；
},
showBottomNavigation:错误
};
}, []);
React.useffect（（）=>{
设置超时（（）=>{
设置加载（假）；
}, 1000);
}, []);
返回(
setBottomNavigation（true）}>更改底部导航
);
};

on按文本元素我们正在更改状态信息，如何从子组件更新？文本元素是子组件。您可以将其替换为任意组件，并将其传递给

setBottomNavigation

。然后，该组件可以随时更改状态。

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>
  );
};