リアクションナビゲーションでリフレッシュする方法

Question

ユーザートークンを削除すると、ユーザーはログインページにリダイレクトされます。しかし、他のユーザーとログインしても、メインページには以前のユーザー情報が表示されます。

これは、メインページを更新しなかったためです。反応ナビゲーションでメインページを手動で（？）再初期化するにはどうすればよいですか？

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') 

メインページはcomponentWillMountを介してユーザJSONデータを受け取る。これは、ルートナビゲーション

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

ある

1）

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

あなたは私のコードを必要とする念の

---

...

2）これは認証スタックナビゲーター（ログインページ）

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コンテナである

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

Answer 1

、あなたの状態を管理するために、フラックスまたはReduxの使用なら、あなたは（あなたの新しい状態を更新例えば新しいユーザー名などのデータが変更された場合）、すべてが更新されます。

状態管理ソリューションを使用しない場合は、pass parameters in the navigate functionを使用できます。したがって、ログイン後にメインページに移動するときに、メインページが更新する必要があることを知らせるフラグなどを渡します。

これは、リンクされたドキュメントからの例です：あなたがメインのページに移動するとき、

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

そして、あなたの場合：

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

とメインページで：

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