无法在 React Native 的自定义抽屉内容功能组件中使用 useContext 挂钩

Question

我正在尝试使用 AuthContext 和 useContext 挂钩实现用户登录。如果用户已登录，我想在抽屉中显示用户名。但是当我尝试访问 CustomDrawerContent 功能组件中的 useContext 时，出现以下错误。

错误：

//App.JsCodes

export default function App() {
 
  const [user,setUser] = useState();
  const Drawer = createDrawerNavigator();
  return (
    <AuthContext.Provider value={{user,setUser}}>
    <NavigationContainer>
      
      <Drawer.Navigator initialRouteName="MenuTab" drawerContent={CustomDrawerContent}>
      
        
        <Drawer.Screen name="MenuTab" component={BottomTabNavigator} />
        
      </Drawer.Navigator>
      
    </NavigationContainer>
    
    </AuthContext.Provider>

//CustomDrawerContend.js

function CustomDrawerContent({navigation}) {

      const {user} = useContext(AuthContext);
      useEffect(() => {
            console.log('the CustomDrawerContent '+user);
      },[]);
      
      
    
      return (
        <SafeAreaView style={{flex:1, paddingBottom:-30}}>
           

           <TouchableOpacity style={{}} onPress={() => navigation.navigate("MenuTab")}>
                <View style={{justifyContent:"center", alignItems:"center", padding:25, backgroundColor:"#bbe3fc", paddingTop:80}}>
                  <Image style={{height:65, width:65}} source={require('../../assets/profileLogo.png')} />
                  <Text>{user ? user.email : 'Sasindu'}</Text>

//登录代码块

const data = await response.json();
                if (data.code=== 200) {
                    authContext.setUser(data.data);
                    console.log('Sign in screen user '+JSON.stringify(authContext.user));
                    setLoggedUser(data.data);
                    navigation.navigate('DrawerNav');

Answer 1

drawerContent={CustomDrawerContent} 是另一个传递给 Drawer.Navigator 的道具。因此，在这种道具中使用 useContext 是未经授权的。由于要求是显示登录的用户名，我使用了另一个组件 return 登录的用户名，我能够在该功能组件内使用 useContext 并且运行良好。并将该新组件添加到我想在 CustomDrawerContent 功能组件中显示用户名的位置。请记住，只能在独特的功能组件内部调用挂钩。 check this as well

function ShowLoggedUsername(props) {
const {user} = useContext(AuthContext);

return (
    <View>
        <Text>{user ? user.email : 'Username' }</Text>
    </View>
);

}

导出默认 ShowLoggedUsername；

CustomDrawerContent FC

<TouchableOpacity style={{}} onPress={() => navigation.navigate("MenuTab")}>
            <View style={{justifyContent:"center", alignItems:"center", padding:25, backgroundColor:"#bbe3fc", paddingTop:80}}>
              <Image style={{height:65, width:65}} source={require('../../assets/profileLogo.png')} />
              <ShowLoggedUsername />
              <Button title="Log-Out" />
              
            </View>
      </TouchableOpacity>

无法在 React Native 的自定义抽屉内容功能组件中使用 useContext 挂钩

Cannot use useContext hook in Custom Drawer Content Functional Component in React Native

reactjs

react-native

authentication

react-native-android

react-native-navigation