如何从另一个类刷新React-Native中的主App类呈现

问题描述 投票:0回答:1

我正在尝试使用React-Native创建我的第一个应用程序,我创建了一个呈现身份验证表单的类,在处理提交后应用程序应该使用其选项卡呈现导航屏幕。我想我可以从认证屏幕“刷新”某些App类渲染,这样它可以再次检查用户是否已经过身份验证,但我不确定

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:

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>
    );
  }
}
reactjs react-native
1个回答
1
投票

您可以使用react-navigation(RN导航库)来完成此操作。但是每个代码都有问题,你试图在屏幕之间切换。

在你的方式:如果成功跟随,qhxxswpoi方法的AuthScreen

handleSubmit

在ParentComponent中更新状态以在屏幕handleSubmit = () => { check auth logic this.props.onSuccessFullLogin(value) } 之间切换:

App Component这应该像<AuthScreen />

© www.soinside.com 2019 - 2024. All rights reserved.