是否可以从 react-native 中的类组件访问功能上下文？

Question

我目前正在使用 react-native 项目 v0.63.2 并使用@react-navigation-5。初始屏幕、登录屏幕和选项卡屏幕的导航基于上下文。

应用上下文.js

import React from 'react';

const AppContext = React.createContext({IsLoading: true, IsLoggedIn: false});

export default AppContext;

导航容器.js

import AppContext from './appContext';

const StackApp = createStackNavigator();

export const StackNavigator = () => {

  const [appState, setAppState] = React.useState({});

  const state = { appState, setAppState };

  React.useEffect(() => {

    setAppState({ IsLoading: true, IsLoggedIn: false });

  }, []);

  return (

    <AppContext.Provider value={state}>

      {appState.IsLoading ? (

        <SplashScreen />

      )

        : (

          <NavigationContainer>

            <StackApp.Navigator>

              {

                appState.IsLoggedIn

                  ?

                  <>

                    <StackApp.Screen name='BottomTabScreen' component={BottomTabScreen} options={{ headerShown: false }} />

                  </>

                  :

                  <StackApp.Screen name='LoginScreen' component={NavigatorLogin} options={{ headerShown: false }} />

              }

            </StackApp.Navigator>

          </NavigationContainer>

        )}

    </AppContext.Provider>

  )

}

我用类组件重新创建了新的登录页面。它可以加载所有以前的方式作为功能组件。但我无法修改/更新IsLoggedIn: true.

我尝试了什么：- initLogin.js

import AppContext from '../navigator/appContext';

const AppState = ({ newContext }) => {

  const { setAppState } = React.useContext(AppContext);

  console.log('setAppState:=> ' + JSON.stringify(setAppState));

  console.log('newContext:=> ' + JSON.stringify(newContext));

  setAppState(newContext);

}

export class initSignIn extends Component {

   onPressLogin = () => {

      AppState({ IsLoggedIn: true });

   }

}

这将引发错误挂钩规则

挂钩调用无效。钩子只能在函数组件的内部调用

我也试过使用静态上下文。没有错误，但值未定义表明密钥IsLoggedIn不存在。

Answer 1

这将是一个将上下文与类组件一起使用的工作示例。请记住，当您从一个类访问它时，您只能使用一个上下文。在这里我创建了一个按钮组件来更新上下文。如您所见，我在上下文中有一个函数，它会更新我们从 useState 传递 setAppState 函数的上下文。&nbsp; const AppContext = React.createContext({&nbsp; &nbsp; &nbsp; appState: { IsLoading: true, IsLoggedIn: false },&nbsp; &nbsp; &nbsp; setAppState: () => {},&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; export default function App() {&nbsp; &nbsp; &nbsp; const [appState, setAppState] = React.useState({&nbsp; &nbsp; &nbsp; &nbsp; IsLoading: false,&nbsp; &nbsp; &nbsp; &nbsp; IsLoggedIn: false,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <AppContext.Provider value={{ appState, setAppState }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.paragraph}>{JSON.stringify(appState)}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; </AppContext.Provider>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; class Button extends React.PureComponent {&nbsp; &nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={() =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.context.setAppState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IsLoading: !this.context.appState.IsLoading,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; IsLoggedIn: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>Update</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; Button.contextType = AppContext;零食网址 https://snack.expo.io/@guruparan/contextwithclass