亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

是否可以從 react-native 中的類組件訪問功能上下文?

是否可以從 react-native 中的類組件訪問功能上下文?

慕姐4208626 2023-03-24 17:07:31
我目前正在使用 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不存在。
查看完整描述

1 回答

?
長風秋雁

TA貢獻1757條經驗 獲得超7個贊

這將是一個將上下文與類組件一起使用的工作示例。請記住,當您從一個類訪問它時,您只能使用一個上下文。


在這里我創建了一個按鈕組件來更新上下文。如您所見,我在上下文中有一個函數,它會更新我們從 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


查看完整回答
反對 回復 2023-03-24
  • 1 回答
  • 0 關注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號