Expo应用Google认证后，Linking.createURL无法跳转至首页求助

核心问题分析 #

你的代码中，当Google认证成功并获取到createdSessionId后，没有执行会话激活和页面跳转的逻辑，这是导致停留在登录页的直接原因。此外还需要确认路由配置和Scheme是否正确。

解决方案步骤 #

1. 完善认证成功后的逻辑 #

修改LoginScreen中的onPress函数，在createdSessionId存在时，先激活Clerk会话，再导航到Home页面：

import { View, Text, Pressable, Image } from 'react-native'
import React, { useCallback } from 'react'
import Colors from './../../constants/Colors'
import { useOAuth } from '@clerk/clerk-expo'
import * as Linking from 'expo-linking'
import * as WebBrowser from 'expo-web-browser'
import { useNavigation } from '@react-navigation/native' // 导入导航钩子

export const useWarmUpBrowser = () => {
  React.useEffect(() => {
    void WebBrowser.warmUpAsync()
    return () => {
      void WebBrowser.coolDownAsync()
    }
  }, [])
}

WebBrowser.maybeCompleteAuthSession()

export default function LoginScreen() {
  useWarmUpBrowser();
  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' })
  const navigation = useNavigation(); // 获取导航实例

  const onPress = useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({
        redirectUrl: Linking.createURL('/home', { scheme:'myapp' })
      })

      if (createdSessionId) {
        // 激活Clerk会话
        await setActive({ session: createdSessionId });
        // 导航到Home页面
        navigation.navigate('Home');
      } else {
        // 处理MFA等后续步骤
        if (signIn) await signIn.create({ redirectUrl: Linking.createURL('/home', { scheme:'myapp' }) });
        if (signUp) await signUp.create({ redirectUrl: Linking.createURL('/home', { scheme:'myapp' }) });
      }
    } catch (err) {
      console.error('OAuth error', err)
    }
  }, [navigation, startOAuthFlow])

  return (
    <View style={{
      backgroundColor:Colors.WHITE,
      height:'100%'
    }}>
      <Pressable 
        onPress={onPress}
        style={{
          padding:14,
          marginTop:100,
          backgroundColor:Colors.PRIMARY,
          width:'100%',
          borderRadius:14
        }}>
          <Text style={{
            fontFamily:'outfit-medium',
            fontSize:20,
            textAlign:'center'
          }}>Sign In With Google</Text>
        </Pressable>
    </View>
  )
}

2. 确认路由配置正确 #

确保你的项目中已经配置了包含Login和Home页面的路由（以React Navigation为例）：

// App.jsx或导航配置文件
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './path/to/LoginScreen';
import Home from './path/to/Home';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 验证App Scheme配置 #

检查app.json中的scheme是否与你在redirectUrl中使用的myapp一致：

{
  "expo": {
    "scheme": "myapp",
    // 其他配置...
  }
}

额外注意事项 #

• 确保@react-navigation/native和对应导航依赖已安装：npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context
• 如果使用Expo Go，修改app.json后需要重新启动Expo服务，确保Scheme生效

内容的提问来源于stack exchange，提问作者MichaelLicious