在 React Native 中使用上下文

IT技术 javascript reactjs react-native
2021-05-02 23:15:00

在基于 web 的 React 中,我们的 props 有上下文,可以设置并用作依赖注入机制。我想在 React Native 应用程序中做类似的事情。有没有办法做到这一点?

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