[英]Is it possible to access functional context from class component in react-native?
I'm currently having react-native project v0.63.2 and using @react-navigation-5.我目前正在使用 react-native 项目 v0.63.2 并使用 @react-navigation-5。 Navigation from splash screen, login screen and tab screen is based from context.
从初始屏幕、登录屏幕和选项卡屏幕导航是基于上下文的。
appContext.js应用上下文.js
import React from 'react';
const AppContext = React.createContext({IsLoading: true, IsLoggedIn: false});
export default AppContext;
navigationContainer.js导航容器.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>
)
}
I recreate new login page with a class component.我用一个类组件重新创建了新的登录页面。 It can load all the previous way as functional component.
它可以加载所有以前的方式作为功能组件。 But I unable to modify/update the context for
IsLoggedIn: true
.但我无法修改/更新
IsLoggedIn: true
的上下文。
What I have tried:- initLogin.js我尝试过的:- 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 });
}
}
This will raise error hooks rules这将引发错误挂钩规则
Invalid hook call.
无效的钩子调用。 Hooks can only be called inside of the body of a function component
Hooks 只能在函数组件内部调用
I also tried use static context.我也尝试使用静态上下文。 No error but value undefined indicated the key
IsLoggedIn
is not there.没有错误,但值未定义表明键
IsLoggedIn
不存在。
Some of my reference:我的一些参考:
I added snack minimal script.我添加了零食最小脚本。 Might having error due to UI Kitten theme I use.
由于我使用的 UI Kitten 主题,可能会出错。 I'm not familiar with snack Minimal Script
我不熟悉小吃最小脚本
This would be a working example that uses context with a class component.这将是一个使用上下文与类组件的工作示例。 Remember that you can use only one context when you are accessing it from a class.
请记住,当您从一个类访问它时,您只能使用一个上下文。
Here I have created a button component which would update the context.在这里,我创建了一个按钮组件来更新上下文。 As you can see i have function inside the context which would update the context which we pass the setAppState function from useState.
正如你所看到的,我在上下文中有函数,它会更新我们从 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;
Url for snack https://snack.expo.io/@guruparan/contextwithclass零食网址 https://snack.expo.io/@guruparan/contextwithclass
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.