web-dev-qa-db-fra.com

Comment rafraîchir dans React Navigation

Une fois que j'ai supprimé le jeton utilisateur, l'utilisateur redirige vers la page de connexion. Cependant, si je me connecte avec un autre utilisateur, la page principale affiche toujours les informations de l'utilisateur précédent.

C'est parce que je n'ai pas actualisé la page principale. Comment réinitialiser manuellement la page principale (?) Dans react-navigation?

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 reçoit les données JSON de l'utilisateur via componentWillMount

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

Juste au cas où vous auriez besoin de mon code ...

1) Ceci est la navigation racine

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

2) Ceci est Auth Stack Navigator (page de connexion)

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) Il s'agit de l'onglet principal Navigateur

export default TabNavigator(
  {
    Feed: {
      screen: FeedScreen,
    },
    Stylebook: {
      screen: StylebookScreen,
    },
    Wardrobe: {
      screen: WardrobeScreen,
    },
    Noti: {
      screen: NotificationScreen,
    },
    Menu: {
      screen: MenuScreen,
    },
  }, {
   ...
}
reactjsreact-nativereact-routerreact-navigation
7
hellofanengineer

Si vous utilisez Flux ou Redux pour gérer votre état, vous mettez à jour votre nouvel état (par exemple, le nouveau nom d'utilisateur et tout autre changement de données) dans le magasin et tout est mis à jour.

Si vous n'utilisez pas de solution de gestion d'état, vous pouvez passer les paramètres dans la fonction navigate . Ainsi, lorsque vous accédez à la page principale après la connexion, passez un indicateur ou quelque chose qui indique à la page principale qu'elle doit être mise à jour.

Voici l'exemple du document lié:

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

Et dans votre cas, lorsque vous accédez à la page principale:

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

et dans MainPage:

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