第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

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

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

慕姐4208626 2023-03-24 17:07:31
我目前正在使用 react-native 項(xiàng)目 v0.63.2 并使用@react-navigation-5。初始屏幕、登錄屏幕和選項(xiàng)卡屏幕的導(dǎo)航基于上下文。應(yīng)用上下文.jsimport React from 'react';const AppContext = React.createContext({IsLoading: true, IsLoggedIn: false});export default AppContext;導(dǎo)航容器.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>  )}我用類組件重新創(chuàng)建了新的登錄頁(yè)面。它可以加載所有以前的方式作為功能組件。但我無法修改/更新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 });   }}這將引發(fā)錯(cuò)誤掛鉤規(guī)則掛鉤調(diào)用無效。鉤子只能在函數(shù)組件的內(nèi)部調(diào)用我也試過使用靜態(tài)上下文。沒有錯(cuò)誤,但值未定義表明密鑰IsLoggedIn不存在。
查看完整描述

1 回答

?
長(zhǎng)風(fēng)秋雁

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超7個(gè)贊

這將是一個(gè)將上下文與類組件一起使用的工作示例。請(qǐng)記住,當(dāng)您從一個(gè)類訪問它時(shí),您只能使用一個(gè)上下文。


在這里我創(chuàng)建了一個(gè)按鈕組件來更新上下文。如您所見,我在上下文中有一個(gè)函數(shù),它會(huì)更新我們從 useState 傳遞 setAppState 函數(shù)的上下文。


  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;

零食網(wǎng)址 https://snack.expo.io/@guruparan/contextwithclass


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 1 回答
  • 0 關(guān)注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)