在基于 web 的 React 中,我们的 props 有上下文,可以设置并用作依赖注入机制。我想在 React Native 应用程序中做类似的事情。有没有办法做到这一点?
在 React Native 中使用上下文
IT技术
javascript
reactjs
react-native
2021-05-02 23:15:00
2个回答
React Native 使用与reactWeb 应用程序相同的包。所有 React Native 组件的工作方式都与 React 组件相同(在创建、生命周期和 API 方面,主要区别在于它们不渲染 HTML 元素,而是与 OS API 通信的自定义组件),因此您可以像在 React 中一样使用上下文。事实上,F8 应用程序利用上下文功能来处理 Android 中的后退按钮。看看源代码。
嘿,这里有一个我在我的一个项目中用于身份验证的 react native 上下文示例,集中身份验证,然后可以将方法导入相关屏幕,例如 signIn、signUp 或 [user, setUser] =useState() .
import React, {createContext, useState} from 'react';
export const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
return(
<AuthContext.Provider
value = {{
user,
setUser,
LoginWithEmail: async (user, success_callback, failed_callback) => {
......
},
SignupWithEmail: (email, password) => {
....
},
Signout: () => {
.....
},
checkIfLoggedIn : user => {
.....
},
contactpage : (email, message, name, phone) => {
.....
},
forgotPassword : (email) => {
.....
},
logout: async () => {
....
},
}}>
{children}
</AuthContext.Provider>
);
};
然后您可以在相关屏幕中使用它传递上下文:
const {LoginWithEmail} = useContext(AuthContext);
const {signUpWithEmail} = useContext(AuthContext);
const {user, setUser} = useContext(AuthContext);
其它你可能感兴趣的问题