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

Question

我目前正在使用 react-native 项目 v0.63.2 并使用@react-navigation-5。初始屏幕、登录屏幕和选项卡屏幕的导航基于上下文。应用上下文.jsimport React from 'react';const AppContext = React.createContext({IsLoading: true, IsLoggedIn: false});export default AppContext;导航容器.jsimport 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.jsimport 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 函数的上下文。

  const AppContext = React.createContext({

      appState: { IsLoading: true, IsLoggedIn: false },

      setAppState: () => {},

    });

    

    export default function App() {

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

        IsLoading: false,

        IsLoggedIn: false,

      });

    

      return (

        <AppContext.Provider value={{ appState, setAppState }}>

          <View style={styles.container}>

            <Text style={styles.paragraph}>{JSON.stringify(appState)}</Text>

            <Button />

          </View>

        </AppContext.Provider>

      );

    }

    

    class Button extends React.PureComponent {

      render() {

        return (

          <TouchableOpacity

            onPress={() =>

              this.context.setAppState({

                IsLoading: !this.context.appState.IsLoading,

                IsLoggedIn: true,

              })

            }>

            <Text>Update</Text>

          </TouchableOpacity>

        );

      }

    }

    Button.contextType = AppContext;

零食网址 https://snack.expo.io/@guruparan/contextwithclass