[英]How to refresh main App class rendering in React-Native from another class
I'm trying to create my first App using React-Native, i've created a class which renders the authentication form, after handling the submit the App should render the Navigation Screen with its tabs. 我正在尝试使用React-Native创建我的第一个应用程序,我创建了一个呈现身份验证表单的类,在处理了提交后,应用程序应使用其选项卡呈现导航屏幕。 I think i can "refresh" in someway the App class rendering from the Authentication Screen so it can check again if the user has authenticated or not, but i'm not really sure
我认为我可以从“身份验证”屏幕中以某种方式“刷新”应用程序类渲染,以便它可以再次检查用户是否已通过身份验证,但是我不确定
App.Js: App.Js:
import AuthScreen from './screens/AuthScreen';
export default class App extends React.Component {
state = {
isLoadingComplete: false,
isAuthenticated: false,
};
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
} else {
if(this.state.isAuthenticated == true) {
return (
<View style={styles.container}>
<StatusBar hidden = {true} />
<AppNavigator />
</View>
);
} else {
return (
<View style={styles.container}>
<StatusBar hidden = {true} />
<AuthScreen />
</View>
);
}
}
}
AuthScreen.js: AuthScreen.js:
export default class AuthScreen extends Component {
handleSubmit = () => {
const value = this._form.getValue();
console.log('value: ', value);
}
render() {
return (
<View style={styles.container}>
<View style={styles.auth_container}>
<Form
ref={c => this._form = c}
type={User}
options={options}
/>
<Button
title="Submit"
onPress={this.handleSubmit}
/>
</View>
</View>
);
}
}
You can do this by using react-navigation
(RN navigation library). 您可以通过使用
react-navigation
(RN导航库)来实现。 But per code in question your trying to toggle between screen. 但是每个有问题的代码都试图在屏幕之间切换。
In your way: handleSubmit
method of AuthScreen if success to following 以您的方式:如果成功跟随
handleSubmit
方法
handleSubmit = () => {
check auth logic
this.props.onSuccessFullLogin(value)
}
Update State in ParentComponent to toggle between screens App Component
: 在ParentComponent中更新状态以在屏幕之间切换
App Component
:
<AuthScreen />
this should be like <AuthScreen onSuccessFullLogin={()=>this.setState({isAuthenticated:true})} />
<AuthScreen />
这应该类似于<AuthScreen onSuccessFullLogin={()=>this.setState({isAuthenticated:true})} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.