web-dev-qa-db-de.com

So aktualisieren Sie in React Navigation

Sobald ich das Benutzertoken entferne, leitet der Benutzer zur Anmeldeseite weiter. Wenn ich mich jedoch mit einem anderen Benutzer anmelde, werden auf der Hauptseite weiterhin die vorherigen Benutzerinformationen angezeigt.

Das liegt daran, dass ich die Hauptseite nicht aktualisiert habe. Wie kann ich die Hauptseite in der Reaktionsnavigation manuell neu initialisieren (?)?

MainPage(Logged in as 'matt') -> Logout -> LoginPage 
-> (here I want to refresh MainPage so it can be loaded once new user login) 
-> MainPage(Should be logged in as other user 'kobe')

MainPage empfängt Benutzer-JSON-Daten über componentWillMount

  componentWillMount() {
    // retrieve user data 
    this.props.retrieveCurrentUser(this.props.token);
  }

Nur für den Fall, dass Sie meinen Code brauchen ...

1) Dies ist die Root-Navigation

const RootTabNavigator = TabNavigator ({
    Auth: {
      screen: AuthStackNavigator,
    },
    Welcome: {
      screen: WelcomeScreen,
    },
    Main: {
      screen: MainTabNavigator,
    },
  }, {

2) Dies ist Auth Stack Navigator (Anmeldeseite)

export default StackNavigator ({
  Autho: {
    screen: AuthScreen,
  },
  SignUp: {
    screen: SignUpScreen,
  },
  SignUpBio: {
    screen: SignUpUserBioScreen,
  },
  SignUpUsername: {
    screen: SignUpUsernameScreen,
  },
}, {
    header: null,
    headerMode: 'none',
    navigationOptions: {
      header: null
    },
    lazy: true
});

3) Dies ist der Haupt-TabNavigator

export default TabNavigator(
  {
    Feed: {
      screen: FeedScreen,
    },
    Stylebook: {
      screen: StylebookScreen,
    },
    Wardrobe: {
      screen: WardrobeScreen,
    },
    Noti: {
      screen: NotificationScreen,
    },
    Menu: {
      screen: MenuScreen,
    },
  }, {
   ...
}
7

Wenn Sie Flux oder Redux verwenden, um Ihren Status zu verwalten, aktualisieren Sie Ihren neuen Status (z. B. den neuen Benutzernamen und alle anderen Datenänderungen) im Geschäft und alles wird aktualisiert.

Wenn Sie keine Zustandsverwaltungslösung verwenden, können Sie Parameter in der Funktion navigate übergeben . Wenn Sie also nach der Anmeldung zur Hauptseite navigieren, übergeben Sie ein Flag oder etwas, das der Hauptseite mitteilt, dass eine Aktualisierung erforderlich ist.

Dies ist das Beispiel aus dem verlinkten Dokument:

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });


  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

Und in Ihrem Fall, wenn Sie zur Hauptseite navigieren:

navigate('MainPage', { token: '<new token>' })}

und in der Hauptseite:

componentWillReceiveProps(nextProps) {
  if (nextProps.navigation.state.params.token) {
    this.props.retrieveCurrentUser(this.props.token);
  }
}
18
daramasala