Update-Status, wenn Benutzer drücken Sie die Taste in reagieren Native

Question

Ich benutze React-Navigation für Routen verwalten. Das ist mein Hauptkomponente:

class HomeScreen extends React.Component { 
    constructor(props) { 
     this.state = { 
     userProfile: { 
      firstname: 'John', 
      avatar: 'john-profile.png', 
      location: 'Canada', 
     } 
     } 
    } 

    componentDidMount() { 
     AsyncStorage.getItem('userProfile', (errs, result) => { 
     this.setState({userProfile: JSON.parse(result)}); 
     }); 
    } 

    render() { 
     return (
     <View> 
      <Image src="{this.state.userProfile.avatar}" /> 
      <Text>Firstname: {this.state.userProfile.firstname}</Text> 
      <Text>Location: {this.state.userProfile.location}</Text> 
     </View> 
    ); 
    } 
} 

Und dies ist der Bildschirm Profil:

class ProfileScreen extends React.Component { 
    constructor(props) { 
     this.state = { 
     userProfile: null, 
     } 
    } 

    componentDidMount() { 
     AsyncStorage.getItem('userProfile', (errs, result) => { 
     this.setState({userProfile: JSON.parse(result)}); 
     }); 
    } 

    save() { 

     var userSavedProfile = this.state.userProfile; 

     userSavedProfile.firstname = "Peter"; 
     userSavedProfile.avatar = "peter-avatar.png"; 
     userSavedProfile.location = "EEUU"; 

     this.setState({userProfile: userSavedProfile}); 

     AsyncStorage.setItem('userProfile',  JSON.stringify(this.state.userProfile),() => {}); 

    } 

    render() { 
     return (
     <View> 
      <Button title="Save" onPress={() => this.save()} /> 
     </View> 
    ); 
    } 
} 

Wenn ich die neuen Benutzerinformationen speichern und ich drücken Sie die Taste in Header zurück (reagieren-Navigation) das Benutzerprofil alt, Vorname = John, etc ... Wie Update-Status von Home, wenn Benutzer drücken Sie die Taste und aktualisieren Daten?

Answer 1

Ich denke, dass Ihre Anwendung einen Zustandsmanager benötigen würde, wo Sie Ihre Benutzerinformationen speichern und überall in der App darauf zugreifen können. Sie sollten einen Blick auf Redux werfen. Es würde Ihren Bedürfnissen entsprechen und die Informationen auf Ihrem Home-Bildschirm würden automatisch aktualisiert.

Answer 2

Sie können BackHandler benutzen reagieren-native https://facebook.github.io/react-native/docs/backhandler.html Sie Zustand im Inneren Funktion von backhandler