Reactjs React-Native：使用React导航时，如何使应用程序中的上下文可用于屏幕？

我是RN的新手，尝试建立一个登录系统，我在全局范围内存储电子邮件和密码（为了方便代码隐藏），以便使用组件调用服务器，简言之，我尝试将电子邮件保持在应用程序级别，并避免在屏幕之间传递

function App() {
const [email, setEmail] = React.useState('')
const [token,setToken] = React.useState(null)
const AuthenticationContext = React.createContext();


return (
<AuthenticationContext.Provider value={{email,setEmail}}>
<NavigationContainer>
  <Stack.Navigator>
  >
 {token == null ? (

    <Stack.Screen name="Home" component={HomeScreen} />

   ) : (

    <Stack.Screen
      name="Profile"
      component={ProfileScreen}
      options={({ route }) => ({ title: route.params.name })}
    />
     )}

  </Stack.Navigator>
</NavigationContainer>
</AuthenticationContext.Provider>
 );
}

函数应用程序（）{
const[email，setEmail]=React.useState（“”）
const[token，setToken]=React.useState（null）
const AuthenticationContext=React.createContext（）；
返回(
>
{token==null(
) : (
（{title:route.params.name}）
/>
)}
);
}

以及主屏幕和LoginForm组件，它是应用程序组件的孙子（我将在其中设置令牌）：

功能主屏幕（{导航，路线}，道具）{
返回(
{props.token！=null？
navigation.navigate（'Profile'）}
/>
：null}
);
}

---

但是我得到了一条消息：AuthenticationContext未定义

在

App

之外创建上下文变量并使其可导出

export const AuthenticationContext = React.createContext();

function App() {
  return (
    <AuthenticationContext.Provider value={{email,setEmail}}>
      // Children
    </AuthenticationContext.Provider>

  )
}

还是没有

import { AuthenticationContext } from './App';

function HomeScreen (props) => {
  const onPress = () => {
    props.navigation.navigate('Profile');
  }
  return (
    <AuthenticationContext.Consumer>
      {({ email, setEmail }) => (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <LoginForm {...props} />
          { props.token != null ? (
              <Button
                title="Go to Profile"
                onPress={onPress} 
              /> 
            ) : null
          }
        </View>
      }
    </AuthenticationContext.Consumer>
  )
}  

从“/App”导入{AuthenticationContext}；
功能主屏幕（道具）=>{
const onPress=（）=>{
道具.导航.导航（'Profile'）；
}
返回(
{（{email，setEmail}）=>(
{props.token！=null(
)：null
}
}
)
}  

感谢您的输入，我成功地组织了代码并将上下文置于应用程序之外：），我可以在主屏幕组件中使用电子邮件和设置电子邮件，但在LoginForm组件中，我很难做到这一点

import { AuthenticationContext } from './App';

function HomeScreen (props) => {
  const { email, setEmail } = React.useContext(AuthenticationContext);
  const onPress = () => {
    props.navigation.navigate('Profile');
  }
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <LoginForm {...props} />
      { props.token != null ? (
          <Button
            title="Go to Profile"
            onPress={onPress} 
          /> 
        ) : null
      }
    </View>
  )
}  

import { AuthenticationContext } from './App';

function HomeScreen (props) => {
  const onPress = () => {
    props.navigation.navigate('Profile');
  }
  return (
    <AuthenticationContext.Consumer>
      {({ email, setEmail }) => (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <LoginForm {...props} />
          { props.token != null ? (
              <Button
                title="Go to Profile"
                onPress={onPress} 
              /> 
            ) : null
          }
        </View>
      }
    </AuthenticationContext.Consumer>
  )
}