React Native：使用反应导航时如何使应用程序的上下文可用到屏幕？

Question

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

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

还有 HomeScreen 和 LoginForm 组件，它是 App 组件的孙子（我将在其中设置令牌）：

function HomeScreen({ navigation, route },props ) {

return (
<AuthenticationContext.Consumer>
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

  <LoginForm {...props} />
{ props.token != null ? 
  <Button
    title="Go to Profile"
    onPress={() => navigation.navigate('Profile')} 
  />
:  null}

   </View>
</AuthenticationContext.Consumer>
 );
}

但是我得到消息：AuthenticationContext 没有定义

Answer 1

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

export const AuthenticationContext = React.createContext();

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

  )
}

那么在HomeScreen上就可以按如下方式使用了

使用useContext 钩子：

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