Question

在我的 React Native 项目中，我有一个 authContext 文件来管理用户注册和登录。

一旦用户成功注册（或登录），我希望上下文文件中的相关功能将用户重定向到主页（“TrackList”）。因为上下文位于 React 导航容器之外，我一直在关注 'Navigating without the navigation prop' 的 v5 react 导航文档，其中明确指出“您可以在 React 组件之外使用这种方法”。这是我的实现，为了便于阅读，我将尽量将其保持在最低限度。

AuthContext 文件如下所示：

import React, { useState } from "react"
import trackerApi from "../api/tracker"

import * as RootNavigation from '../RootNavigation'

const AuthContext = React.createContext()

export const AuthProvider = ({ children }) => {

    const [token, setToken] = useState(null)//token from express server indicates user signed in
    const [errorMessage, setErrorMessage] = useState("")

    const signup = async ({ email, password }) => {
        try {
            //returns JSON Web Token JWT and update state
            const response = await trackerApi.post("/signup", { email, password })
            setToken(response.data.token)
        } catch (err) {
            setErrorMessage("Something went wrong with sign up")
        }
        //after successful signup we redirect  
        RootNavigation.navigate('TrackList')
    }

    const signIn = ...

    const signOut = ...

    return <AuthContext.Provider value={{ token, signup, signIn, signOut, errorMessage }}>
        {children}
    </AuthContext.Provider>
}

export default AuthContext

然后在我的 App.js 中：

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';
import { AuthProvider } from "./src/context/AuthContext"
(...other relevant imports)

function TrackListFlow() {
  return (
    <Stack.Navigator initialRouteName="Signup">
     //**SCREEN I WANT TO REDIRECT TO: **
      <Stack.Screen name="TrackList" component={TrackListScreen} />
      <Stack.Screen name="TrackDetail" component={TrackDetailScreen} />
    </Stack.Navigator>
  )
}

function MainFlow() {
  return (
    <Tab.Navigator initialRouteName="TrackListFlow">
      <Tab.Screen name="TrackListFlow" component={TrackListFlow} />
      <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  )
}

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="LoginFlow" >
        <Stack.Screen name="LoginFlow" component={LoginFlow}/>
        <Stack.Screen name="MainFlow" component={MainFlow} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

登录过程有效，当使用导航容器内的按钮时，反应导航过程工作正常。但是，我似乎无法导航到导航容器外的屏幕（即从 authcontext）。当我这样做时，我收到以下错误：

负载为 {"name":"TrackList"} 的操作“NAVIGATE”未被任何导航器处理。你有一个名为“TrackList”的屏幕吗？

我必须承认，虽然我遵循了很多 React 导航文档和流程，但我对这一部分有点困惑，所以我可能完全采取了错误的方法。帮助表示赞赏！谢谢。

Answer 1

出于好奇，您能否提供您的 RootNavigation 文件代码？

但我认为您的问题是您在“App”函数返回中没有“TrackListFlow”组件。您的“应用”功能应该是这样的：

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="LoginFlow" >
        <Stack.Screen name="LoginFlow" component={LoginFlow}/>
        <Stack.Screen name="MainFlow" component={MainFlow} />
        <Stack.Screen name="TrackListFlow" component={TrackListFlow} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

试试这个代码并给我你的反馈:)

在没有导航道具/外部组件的情况下无法访问反应导航（v5）

1 个答案: