在我的 Expo 应用程序中，Linking.createURL 在 Google 身份验证后未将应用程序路由到主页

Question

当我在 Expo Go 上测试我的 Expo 应用程序时，经过 Google 身份验证后，它没有将我链接到“home.jsx”页面。这是来自index.jsx的代码（作为参考，我使用Clerk进行身份验证）：

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 * as AuthSession from 'expo-auth-session'


export const useWarmUpBrowser = () => {
  React.useEffect(() => {
    // Warm up the android browser to improve UX
    // https://docs.expo.dev/guides/authentication/#improving-user-experience
    void WebBrowser.warmUpAsync()
return () => {
      void WebBrowser.coolDownAsync()
    }
  }, [])
}

WebBrowser.maybeCompleteAuthSession()

export default function LoginScreen() {

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

      if (createdSessionId) {
   
      } else {
        // Use signIn or signUp for next steps such as MFA
      }
    } catch (err) {
      console.error('OAuth error', err)
    }
  }, [])

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

当按下 Pressable 时，应用程序会启动 Google 身份验证流程，但登录后，我期望它路由到“home.jsx”，这只是一个简单的 rnf

import { View, Text } from 'react-native'
import React from 'react'

export default function Home() {
  return (
    <View>
      <Text>Home </Text>
    </View>
  )
}

但是，它只是保留在index.jsx上

任何帮助都将非常感激！非常感谢！！

Answer 1

您有正确的导航器设置吗？ 像这样的东西

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import LoginScreen from './LoginScreen'  // Your login screen
import Home from './Home'  // The home screen you mentioned

const Stack = createStackNavigator();

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

确保您有正确的导航器设置后，使用此软件包导航到主屏幕

@react-navigation/native

像这样的东西

import { useNavigation } from '@react-navigation/native'

export default function LoginScreen() {
...
const navigation = useNavigation();
...
const onPress = useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({
        // redirectUrl: Linking.createURL('/home', { scheme:'myapp' })
        // use this instead
        navigation.navigate('Home')
      })

      if (createdSessionId) {
   
      } else {
        // Use signIn or signUp for next steps such as MFA
      }
    } catch (err) {
      console.error('OAuth error', err)
    }
  }, [])


}