如何在 React Navigation 中刷新 [英] How to refresh in React Navigation

问题描述

一旦我删除了用户令牌，用户就会重定向到登录页面.但是，如果我使用其他用户登录，主页仍会显示以前的用户信息.

Once I remove user token, user redirects to Login Page. However if I login with other user, the main page still shows the previous user information.

这是因为我没有刷新主页.如何在 react-navigation 中手动重新初始化(?)主页?

This is because I didn't refresh the Main page. How can I re-initialize(?) Main Page manually in 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 通过 componentWillMount 接收用户 JSON 数据

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

<小时>

以防万一你需要我的代码...

---

Just in case you need my code...

1) 这是根导航

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

2) 这是 Auth Stack Navigator(登录页面)

2) This is Auth Stack Navigator (Login Page)

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) 这是主 TabNavigator

3) This is Main TabNavigator

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

推荐答案

如果您使用flux 或redux 来管理您的状态，那么您在商店中更新您的新状态(例如新用户名和任何其他数据更改)，一切都会得到更新.

If you use flux or redux to manage your state then you update your new state (e.g. new user name and whatever other data changes) in the store and everything gets updated.

如果您不使用状态管理解决方案，那么您可以在导航功能.因此，当您在登录后导航到主页时，请传递一个标志或其他内容，让主页知道它需要更新.

If you don't use a state management solution then you can pass parameters in the navigate function. So when you navigate to the main page after the login, pass a flag or something that lets the main page know it needs to update.

这是链接文档中的示例:

This is the example from the linked doc:

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

在您的情况下，当您导航到主页时:

And in your case, when you navigate to main page:

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

在主页:

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

这篇关于如何在 React Navigation 中刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！