简体   繁体   中英

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. 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:

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>
    );
  }
}

You can do this by using react-navigation (RN navigation library). But per code in question your trying to toggle between screen.

In your way: handleSubmit method of AuthScreen if success to following

handleSubmit = () => {
    check auth logic
    this.props.onSuccessFullLogin(value)
}

Update State in ParentComponent to toggle between screens App Component :

<AuthScreen /> this should be like <AuthScreen onSuccessFullLogin={()=>this.setState({isAuthenticated:true})} />

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM