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

【问题标题】：Cannot use useContext hook in Custom Drawer Content Functional Component in React Native无法在 React Native 的自定义抽屉内容功能组件中使用 useContext 挂钩
【发布时间】：2021-07-05 11:21:54
【问题描述】：

我正在尝试使用 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');

【问题讨论】：

标签： reactjs react-native authentication react-native-android react-native-navigation

【解决方案1】：

drawerContent={CustomDrawerContent} 是另一个传入 Drawer.Navigator 的道具。因此，在这种道具中使用 useContext 是未经授权的。由于要求是显示记录的用户名，我使用了另一个组件来返回记录的用户名，并且我能够在该功能组件中使用 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>

【讨论】：