如何在 RN 应用程序的根文件中使用 useAuthContext

Question

我正在使用react-native 和supabase 作为数据库来开展这个副项目。我创建了这个身份验证提供程序，我想在根文件 (app.tsx) 中使用它，但状态仍然为空。我尝试此方法的原因是因为我需要根据用户是否登录有条件地渲染

<Tab.Navigator />

或

<Stack.Navigator />

。

目前，实现此功能的唯一方法是在 app.tsx 中进行 supabase 会话获取，而不是使用来自

useAuthContext

的会话。我只能在子组件中访问我需要的数据，而不能在顶层访问。

// app.tsx
export default function App() {
  const [session, setSession] = useState(null);
  const { state: { session } } = useAuthContext(); // ideally I would like to do this

  // ideally i would NOT like to keep this
  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);


  return (
    <AuthProvider>
      <GluestackUIProvider config={config}>
        <SafeAreaProvider>
          <NavigationContainer>
            {session && session.user ? (
              <TabNavigator key={session.user.id} session={session} />
            ) : (
              <StackNavigator />
            )}
          </NavigationContainer>
        </SafeAreaProvider>
      </GluestackUIProvider>
    </AuthProvider>
  );
}

可以这样做吗？如果没有，我希望获得一些有关如何实现这一目标的提示。

Answer 1

context

的值只能由包装在相应

ContextProvider

内的组件访问。因此，只需将访问和使用上下文值的逻辑移至不同的组件，将其包装在

AuthProvider

内即可。

// AppNav.tsx
export default function AppNav() {
  const { state: { session } } = useAuthContext();

  return (
    <NavigationContainer>
      {session && session.user ? (
        <TabNavigator key={session.user.id} session={session} />
      ) : (
        <StackNavigator />
      )}
    </NavigationContainer>
  );
}

// App.tsx
export default function App() {
  return (
    <AuthProvider>
      <GluestackUIProvider config={config}>
        <SafeAreaProvider>
          <AppNav />
        </SafeAreaProvider>
      </GluestackUIProvider>
    </AuthProvider>
  );
}

此外，如果您尝试使用多个提供程序，只需确保以正确的顺序调用它们即可。

// Provider A depends on Provider B
return (
  <ProviderB>
    <ProviderA>
      <Component/>
    <ProviderA/>
  <ProviderB/>
)