React Native，全局使用状态？

Posted 2023-02-23

【中文标题】React Native，全局使用状态？

【英文标题】：React Native, global useState?

【发布时间】：2021-01-01 15:19:38

【问题描述】：

我有一个 Fire 类，如果用户未连接，uid 返回 undefined，如果用户已连接，则返回字符串（他的 uid）。

有时我的渲染依赖于此。

例如：

const [auth, setAuth] = useState<undefined|string>(Fire.shared.uid);

[...]

<Text>(auth == undefined) ? "not authentificated" : "great")</Text>

我们可以想象用户没有连接，所以文本将是not authentificated。 现在他将在另一个页面中登录或注册，因此Fire 类中的 uid 变量将发生变化。 那么我应该如何改变状态值呢？

没有useState global之类的吗？

谢谢。

【参考方案1】：

你应该使用上下文：

page-context.js

export const PageContext= React.createContext();

app.js

const App = () => 
const [auth, setAuth] = useState<undefined|string>(undefined);

return(
    <PageContext.Provider value=[auth, setAuth]>
       <NavigationContainer> // your routes
    </PageContext.Provider>)

OtherScreen.js

function OtherScreen() 
    const [auth] = useContext(PageContext);
    return (<Text>(auth == undefined) ? "not authentificated" : "great")</Text>)

Sign.js

 function Sign() 
    const [auth, setAuth] = useContext(PageContext);
    return (<Button onPress=()=>setAuth("myUid) />)
 

【参考方案2】：

你可以使用 react js context api 来拥有这个功能：https://reactjs.org/docs/context.html#updating-context-from-a-nested-component，

或者您可以使用 redux 或 mobx 等第三方库来拥有全局状态

redux : https://redux.js.org/ 暴民：https://mobx.js.org/README.html