在不同文件中的组件之间反应本机传递上下文

Question

我正在启动时使用登录系统构建应用程序 该应用遵循建议的反应导航身份验证工作流

它利用上下文，reducer等 基本上，我有一个带有登录（+注册+忘记密码）屏幕的堆栈，以及一个由包含应用程序本身的抽屉组成的堆栈；如果用户已登录，则显示抽屉堆栈，否则显示登录堆栈。 当我制作原型时，我制作了一个文件，并且一切正常，所以我决定将各个组件移动到单个文件中，然后它停止工作

我有App.js

import React, { useMemo, useReducer, createContext } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Home from './screens/Home';
import About from './screens/About';

import MyDrawer from './components/DrawerContent';

import LoginScreen from './components/LoginScreen';
const Drawer = createDrawerNavigator();

//The drawer shown to logged in users
function DrawerNavigator() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => MyDrawer(props)}
    >
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="About" component={About} />
    </Drawer.Navigator>
  );
}
const AppStack = createStackNavigator();

const AuthContext = createContext();

export default function App({ navigation }) {
  const authContext = useMemo(
    () => ({
      signIn: () => console.log('siginin'),
      signOut: () => console.log('siginout'),
    }),
    []
  );

  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        <AppStack.Navigator initialRouteName="Login">
          <AppStack.Screen
            name="HomeApp"
            component={DrawerNavigator}
            options={HeaderOption}
          />
          <AppStack.Screen
            name="Login"
            component={LoginScreen}
            options={HeaderOption}
          />
          <AppStack.Screen
            name="Register"
            component={RegisterScreen}
            options={HeaderOption}
          />
        </AppStack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

和LoginScreen.js

import React, { useState, useContext, useReducer } from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  TouchableHighlight,
  Image,
  Button,
  StatusBar,
  TextInput,
  ColorPropType,
} from 'react-native';

import Constants from '../constants/constant';

export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const { signIn } = useContext(AuthContext);
 

  return (
    <View
      style={{
        flex: 1,

        backgroundColor: Constants.MAIN_GREEN,
      }}
    >
      <View style={{ ...styles.container }}>
        <StatusBar hidden={true} />
        <View style={{ ...styles.logoContainer }}>
          <Image
            style={styles.logoIcon}
            source={require('../assets/logo_popeating_amp.png')}
          />
        </View>

        <View style={{ ...styles.inputContainer }}>
          <Image
            style={styles.inputIcon}
            source={require('../assets/mail.png')}
          />
          <TextInput
            autoFocus={true}
            placeholder="Email address"
            onChangeText={(email) => setEmail(email)}
            value={email}
            label="Email"
            style={styles.inputs}
            keyboardType={'email-address'}
          />
        </View>
        <View style={{ ...styles.inputContainer }}>
          <Image
            style={styles.inputIcon}
            source={require('../assets/password.png')}
          />
          <TextInput
            placeholder="Password"
            onChangeText={(password) => setPassword(password)}
            value={password}
            secureTextEntry={true}
            label="Password"
            style={styles.inputs}
          />
        </View>
        <TouchableHighlight
          style={[styles.buttonContainer, styles.loginButton]}
          onPress={() => signIn({ username, password })}
          underlayColor={Constants.HI_COLOR}
        >
          <Text style={styles.loginText}>LOGIN</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => props.navigation.navigate('HomeApp')}
          underlayColor={Constants.HI_COLOR}
        >
          <Text>Forgot your password?</Text>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.buttonContainer}
          onPress={() => props.navigation.navigate('Register')}
          underlayColor={Constants.HI_COLOR}
        >
          <Text>Register</Text>
        </TouchableHighlight>
      </View>
    </View>
  );
}

当LoginScreen组件位于App.js内时，所有操作均按预期方式工作，单击登录按钮可正确调用context作为上下文的一部分，但是一旦我将LoginScreen组件移动到其自己的文件中，就会出现以下错误< strong> ReferenceError：找不到变量：AuthContext 看起来LoginScreen组件不再是上下文的一部分 我对反应本机和反应是安静的新事物，所以可能会缺少关于如何使所有内容粘合在一起的信息

任何帮助将不胜感激 谢谢