在 iPhone 上使用 Google 登录（本地 Metro 服务器 + 开发构建） - 第 5/7 部分：Expo Router 设置

Source: Dev.to

快速回顾！

从第 1‑4 步，我们已经完成了：

• 安装必要的包 – 步骤 1
• 创建 Clerk 项目 – 步骤 2
• 添加 Clerk API 密钥 – 步骤 3
• 创建并配置 Google Cloud 控制台 – 步骤 4

设置路由

在此步骤中，我们使用 Expo Router “Protected” 路由（在 Expo Router SDK 53 之后可用）来保护受限页面。
根布局现在使用 ClerkProvider 包裹整个应用。

带 ClerkProvider 的根布局

// _layout.tsx
export default function RootLayout() {
  const publishableKey =
    process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY ??
    EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;

  if (!publishableKey) {
    throw new Error(
      "Missing EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY. Set it in your .env (see Clerk Expo quickstart) or in env.ts."
    );
  }

  return (
    
      
    
  );
}

带受保护屏幕的导航

// _layout.tsx
function RootLayoutNav() {
  const { isLoaded, isSignedIn } = useAuth();
  const isLoggedIn = isLoaded && isSignedIn;

  return (
    
      {/* Only available when NOT logged in */}
      
        
      

      {/* Only available when logged in */}
      
        
      

      {/* Public screens */}
      
    
  );
}

必要的导入

// _layout.tsx
import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import { tokenCache } from "@clerk/clerk-expo/token-cache";
import { Stack } from "expo-router";
import { EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY } from "../env";

目录结构

（详细信息请参阅介绍。）

参考

有关 Expo Router 受保护路由的更多细节，请参阅：Expo Router – Protected routes