導航組件之間的導航重新加載導航器路線中的所有組件

我讀過某處，當您使用react-navigation包中的任何導航器，並且如果您實現了REDX;在航海家路線的每個組件將重新加載（即componentWillRecieveProps）導航組件之間的導航重新加載導航器路線中的所有組件

不過，我有兩個頁面，用戶可以

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

登錄屏幕最初被顯示給用戶登錄。它具有一種形式，用戶可以手動輸入憑據，還可以導航到相機的按鈕，用戶可以使用登錄憑據掃描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; 
}

我能做些什麼來防止這種行爲？

來源

2017-07-11 DerpyNerd

好，

正如我介紹了另一個布爾進入導航狀態下的臨時解決方案：

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檢查登錄或相機組件應定位在登錄後啓動

它的工作原理，但它仍然覺得我失去了一些東西。

來源

2017-07-11 09:58:48 DerpyNerd

導航組件之間的導航重新加載導航器路線中的所有組件

回答

相關問題