Question

在基于网络的React中，我们的道具有上下文，可以设置并用作依赖注入机制。我想在React原生应用程序中做类似的事情。有没有办法做到这一点？

Answer 1

React Native使用与Web应用程序相同的react包。所有React Native组件的工作方式与React相同（在创建，生命周期和API方面，主要区别在于它们不呈现HTML元素，而是自定义组件，然后与OS API通信），所以你可以像在React中一样使用上下文。事实上，F8应用程序利用上下文功能来处理Android中的后退按钮。看看source code。

Answer 2

嘿，这是我在一个项目中Ive用于身份验证的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);

在React Native中使用上下文

2 个答案: