コンポーネント間を移動するとナビゲータルートのすべてのコンポーネントがリロードされます

Question

react-navigationパッケージのナビゲータを使用し、reduxを実装するとどこかが読み込まれました。ナビゲータールート内のすべてのコンポーネントは、ユーザーが

export const MainScreenTabNavigator = TabNavigator({ 
    Start: { 
     screen: Start, 
     navigationOptions: { 
      title: 'Start', 
     }, 
    }, 
},{ 
    tabBarPosition: "bottom", 
    tabBarOptions: { 
     activeTintColor: '#222', 
     labelStyle: { 
      color: '#ddd', 
     }, 
     style: { backgroundColor: '#333' }, 
    } 
}); 

export const AppNavigator = StackNavigator({ 
    Main: { 
     screen: MainScreenTabNavigator, // Nested tab navigator 
    }, 
    Login: { 
     screen: Login, 
     navigationOptions: { 
      title: 'Aanmelden', 
     } 
    }, 
    Camera: { 
     screen: AppCamera, 
     navigationOptions: { 
      title: 'Camera', 
     } 
    } 

}, { 
    mode: 'modal', 
    headerMode: 'none', 
}); 

ログイン画面が最初にユーザーに表示されてログインすることができ（すなわちcomponentWillRecieveProps）

しかし、私が持っている2つのページを再ロードされます。ユーザーが資格情報を手動で入力できるフォームと、ログイン資格情報でQRコードをスキャンできるカメラに移動するボタンがあります。

どちらの場合も、ユーザーはログインアクションを送出します。 ログインページとカメラページの両方が同じ小道具の変化に耳を傾ける：

componentWillReceiveProps(nextProps) { 
    if (nextProps.account.loginSuccess) { 
     this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Start' })); 
    } else { 
     if (nextProps.account.loginError) { 
      Toast.showLongBottom(nextProps.loginError); 
     } 
    } 
    this.setState({spinnerVisible: false}); 
} 

アプリが正常に「スタート」に移動しますが、それがない時にログインし、カメラページの両方がcomponentWillReceivePropsに無限ループを引き起こし、再ロードされています無限に「開始」に何度も何度も行き来します。

これは私のナビゲーション減速です：

function nav(state = initialNavState, action) { 
    const nextState = AppNavigator.router.getStateForAction(action, state); 

    // Simply return the original `state` if `nextState` is null or undefined. 
    return nextState || state; 
} 

私はこの動作を防ぐために何ができますか？

Answer 1

まあ、私はNAV状態に別のブールを導入し、一時的な解決策として

：。

function nav(state = initialNavState, action) { 
    let nextState = null; 

    if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'Start') { 
     nextState = {...AppNavigator.router.getStateForAction(action, state), authenticated: true}; 
    } else { 
     nextState = AppNavigator.router.getStateForAction(action, state); 
    } 

    // Simply return the original `state` if `nextState` is null or undefined. 
    return nextState || state; 
} 

私は、ログインまたはカメラ部品はログイン後に開始するようにナビゲートする必要があるかどうかを確認するためにauthenticatedを使用

それは動作しますが、私は何かが不足しているように感じます。