React Navigation에서 새로 고치는 방법

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

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

내 코드가 필요합니다 그냥 경우

---

... ,210

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

그리고 귀하의 경우

, 당신은 메인 페이지로 이동 : MainPage

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

및 지역 :

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