Reagieren Navigation geht auf die anfängliche Route während der Navigation

Question

Ich benutze Expo, Redux und reagieren Navigation.

Das Folgende ist meine erste Route Preloader.js

class PreloaderScreen extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    componentWillMount() { 
     console.log("CWM --", this.props.auth); 
     this.props.getLocalToken(); 
    } 

    componentWillReceiveProps(nextProps) { 
     console.log("NXT props - PL", nextProps); 
     if (nextProps.auth.localTokenStatus == 1) { 
      console.log("Navigating to main"); 
      this.props.navigation.navigate('Main'); 
     } 
     else if (nextProps.auth.localTokenStatus == -1) { 
      console.log("Navigating to Login !!!!"); 
      this.props.navigation.navigate('Login'); 
     } 
     else { 
      console.log("Nothing is happening !"); 
     } 

    } 

    render() { 
     const { navigate } = this.props.navigation; 
     return (
      <View> 
      </View> 
     ) 

    } 
} 

function mapStateToProps(state) { 
    return { 
     auth: state.auth, 
    }; 
} 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ getLocalToken: getLocalToken, storeLocalToken: storeLocalToken }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(PreloaderScreen) 

ich überprüfen, für eine AsyncStorage Variable auf dieser Seite und entsprechend umleiten. Ich überprüfe die AsyncStorage in der folgenden AuthAction.

export function getLocalTokenSuccess(localStore) { 
    console.log('Got Local Token', localStore); 
    return { 
     type: types.GET_LOCALTOKEN_SUCCESS, 
     payload: localStore 
    } 

} 

export function getLocalTokenFail(error) { 
    return { 
     type: types.GET_LOCALTOKEN_FAIL 
    } 
} 


export const getLocalToken = (dispatch) => { 
    return (dispatch) => { 

     AsyncStorage.getItem('localToken') 
      .then((localStore) => dispatch(getLocalTokenSuccess(localStore))) 
      .catch((error) => dispatch(getLocalTokenFail(error))) 
    } 
} 

Das folgende ist mein Minderer, Minderer-auth.js

case types.GET_LOCALTOKEN_SUCCESS: 
     localTokenJSON = JSON.parse(action.payload); 
     console.log("localStore ", action.payload); 
     return { ...state, key: localTokenJSON.key, mobileNumber: localTokenJSON.mobileNumber, localTokenStatus: 1 }; 
     break; 

    case types.GET_LOCALTOKEN_FAIL: 
     console.log("gltf --"); 
     return { ...state, localTokenStatus: -1 } 
     break; 

Es folgt mein Login.js, wo ich landen, wenn es gefunden keine lokale Token ist.

class LoginScreen extends React.Component { 

    constructor(props) { 
    super(props); 

    } 

    submitButton(isValid) { 
    return (
     <Button backgroundColor='#0000b2' style={LoginStyle.buttonStyle} 
     onPress={() => { console.log("Pressed"); this.props.submitOTPMobileNumber(this.props.auth.mobileNumber) }} 
     disabled={!isValid} 
     title='Login' /> 
    ); 
    } 

    state = { 
    keyboardHeight: new Animated.Value(0) 
    }; 

    animateKeyboardHeight = (toValue, duration) => { 
    Animated.timing(
     this.state.keyboardHeight, 
     { toValue, duration }, 
    ).start(); 
    }; 

    componentWillMount() { 

    if (Platform.OS === "android") { 
     this.keyboardShowListener = Keyboard.addListener("keyboardDidShow", ({ endCoordinates }) => { 
     this.animateKeyboardHeight(endCoordinates.height, 0) 
     }); 
     this.keyboardHideListener = Keyboard.addListener("keyboardDidHide",() => { 
     this.animateKeyboardHeight(0, 300) 
     }) 

    } 
    } 
    componentWillReceiveProps(nextProps) { 
    if (nextProps.auth.OTPAPISubmissionSuccess) 
     this.props.navigation.navigate('Otp'); 
    } 

    scrollToInput = (reactNode) => { 
    this.view.scrollToFocusedInput(reactNode) 
    }; 

    handleOnFocus = (e) => { 
    if (Platform.OS === "android") { 
     this.scrollToInput(ReactNative.findNodeHandle(e.target)) 
    } 
    }; 

    render() { 

    const { navigate } = this.props.navigation; 
    return (
     <KeyboardAwareScrollView 
     ref={ref => this.view = ref} 
     enableOnAndroid 
     extraHeight={Platform.OS === "android" ? 10 : undefined} 
     > 
     <View> 
      <Image style={LoginStyle.backgroundImage} source={require('../Images/Icons/login.jpeg')} /> 
     </View> 
     <Card style={LoginStyle.loginBox}> 
      <Text style={LoginStyle.subtitle}>India (+91)</Text> 
      <TextInput 
      onFocus={this.handleOnFocus} 
      style={LoginStyle.textInput} 
      keyboardType='numeric' 
      placeholder="Mobile Number" 
      maxLength={10} minLength={10} 
      onChangeText={(mobileNumber) => { this.props.OTPMobileNumberEntered(mobileNumber) }} 
      value={this.props.auth.mobileNumber}> 
      </TextInput> 
      <Text>{"\n"}</Text> 
      <Text style={LoginStyle.subText}>We will send you a one time SMS message</Text> 
      <Text>{"\n"}</Text> 
      {this.submitButton(this.props.auth.mobileIsValid)} 
     </Card> 
     <Animated.View style={{ height: this.state.keyboardHeight }} /> 

     </KeyboardAwareScrollView> 

    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    auth: state.auth, 
    }; 
} 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    OTPMobileNumberEntered: OTPMobileNumberEntered, 
    submitOTPMobileNumber: submitOTPMobileNumber, 
    }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen) 

Aber wenn ich diesen Code ausführen. Die App navigiert wie diese Preloader> Suche keine localtoken zu Anmeldung geht> Bei Abschicken der Telefonnummer geht es zu Preloader> dann Anmeldung> dann schließlich OTP

Warum wird es nicht Navigieren Sie direkt zu OTP ohne zu gehen Preloader Seite?

Es folgt das Protokoll auf der Expo Konsole

FB Initialized 
21:23:51 
CWM -- Object { 
    "OTPAPISubmissionSuccess": false, 
    "OTPIsValid": true, 
    "OTPNumber": "9000", 
    "firebaseToken": "", 
    "key": "", 
    "localToken": "", 
    "localTokenStatus": 0, 
    "loginSuccess": 0, 
    "mobileIsValid": true, 
    "mobileNumber": "8891468710", 
    "store": "", 
    "user": "", 
} 
21:23:51 
Got Local Token null 
21:23:51 
localStore null 
21:23:51 
gltf -- 
21:23:51 
NXT props - PL Object { 
    "auth": Object { 
    "OTPAPISubmissionSuccess": false, 
    "OTPIsValid": true, 
    "OTPNumber": "9000", 
    "firebaseToken": "", 
    "key": "", 
    "localToken": "", 
    "localTokenStatus": -1, 
    "loginSuccess": 0, 
    "mobileIsValid": true, 
    "mobileNumber": "8891468710", 
    "store": "", 
    "user": "", 
    }, 
    "getLocalToken": [Function anonymous], 
    "navigation": Object { 
    "dispatch": [Function anonymous], 
    "goBack": [Function goBack], 
    "navigate": [Function navigate], 
    "setParams": [Function setParams], 
    "state": Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    }, 
    "screenProps": undefined, 
    "storeLocalToken": [Function anonymous], 
} 
21:23:51 
Navigating to Login !!!! 
21:23:51 
Navigation Dispatch: 
21:23:51 
Action: Object { 
    "action": undefined, 
    "params": undefined, 
    "routeName": "Login", 
    "type": "Navigation/NAVIGATE", 
} 
21:23:51 
New State: Object { 
    "index": 1, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    Object { 
     "key": "id-1507132425968-1", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    ], 
} 
21:23:51 
Last State: Object { 
    "index": 0, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    ], 
} 
21:23:51 
21:34:09 
Pressed 
21:34:09 
HTTP request => 8891468710 
21:34:09 
Requesting HTTP 
21:34:09 
HTTP response, Object { 
    "message": "OTP sent successfully", 
    "status": "OK", 
} 
21:34:09 
checkOTPAPIStatus OK 
21:34:09 
checkOTPAPIStatus OK 
21:34:09 
OTP SEND -- Reducer ! 
21:34:09 
NXT props - PL Object { 
    "auth": Object { 
    "OTPAPISubmissionSuccess": true, 
    "OTPIsValid": true, 
    "OTPNumber": "9000", 
    "firebaseToken": "", 
    "key": "", 
    "localToken": "", 
    "localTokenStatus": -1, 
    "loginSuccess": 0, 
    "mobileIsValid": true, 
    "mobileNumber": "8891468710", 
    "store": "", 
    "user": "", 
    }, 
    "getLocalToken": [Function anonymous], 
    "navigation": Object { 
    "dispatch": [Function anonymous], 
    "goBack": [Function goBack], 
    "navigate": [Function navigate], 
    "setParams": [Function setParams], 
    "state": Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    }, 
    "screenProps": undefined, 
    "storeLocalToken": [Function anonymous], 
} 
21:34:09 
Navigating to Login !!!! 
21:34:09 
Navigation Dispatch: 
21:34:09 
Action: Object { 
    "action": undefined, 
    "params": undefined, 
    "routeName": "Login", 
    "type": "Navigation/NAVIGATE", 
} 
21:34:09 
New State: Object { 
    "index": 2, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    Object { 
     "key": "id-1507132425968-1", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    Object { 
     "key": "id-1507132425968-2", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    ], 
} 
21:34:09 
Last State: Object { 
    "index": 1, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    Object { 
     "key": "id-1507132425968-1", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    ], 
} 
21:34:09 
21:34:09 
Navigation Dispatch: 
21:34:09 
Action: Object { 
    "action": undefined, 
    "params": undefined, 
    "routeName": "Otp", 
    "type": "Navigation/NAVIGATE", 
} 
21:34:09 
New State: Object { 
    "index": 3, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    Object { 
     "key": "id-1507132425968-1", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    Object { 
     "key": "id-1507132425968-2", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    Object { 
     "key": "id-1507132425968-3", 
     "params": undefined, 
     "routeName": "Otp", 
    }, 
    ], 
} 
21:34:09 
Last State: Object { 
    "index": 2, 
    "routes": Array [ 
    Object { 
     "key": "Init-id-1507132425968-0", 
     "routeName": "Preloader", 
    }, 
    Object { 
     "key": "id-1507132425968-1", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    Object { 
     "key": "id-1507132425968-2", 
     "params": undefined, 
     "routeName": "Login", 
    }, 
    ], 
} 

Answer 1

Es ist, weil Sie die Requisiten von der Preloader (die Navigations Requisiten) empfangen sind zu ändern, so dass Sie es geben werde „ComponentWillRecieveProps“, was auslösen die Navigation zum Login, können Sie dieses Problem beheben mit:

componentWillReceiveProps(nextProps) { 
      if(this.props.auth.localTokenStatus!=nextProps.auth.localTokenStatus){ 
       console.log("NXT props - PL", nextProps); 
       if (nextProps.auth.localTokenStatus == 1) { 
        console.log("Navigating to main"); 
        this.props.navigation.navigate('Main'); 
       } 
       else if (nextProps.auth.localTokenStatus == -1) { 
        console.log("Navigating to Login !!!!"); 
        this.props.navigation.navigate('Login'); 
       } 
       else { 
       console.log("Nothing is happening !"); 
       } 
      } 
     } 

Welche wenn die nextProps.localTokenStatus vergleicht von Ihrem this.props.localTokenStatus unterscheidet, bevor die Navigation wieder Auslösung, so wird es sei denn, der localTokenStatus nicht geschehen aus Sie r redux ändert sich.

EDIT: Dies geschieht, weil preloader noch existiert, da Sie nicht klar, tat es aus dem Navigationsstapel ist, können Sie dies mit dieser Funktion:

import { NavigationActions } from 'react-navigation'; 
... 
clearStack(route) { 
    const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
     NavigationActions.navigate({ routeName: route}) 
     ] 
    }) 
    this.props.navigation.dispatch(resetAction) 
    } 

Welche genannt werden können, wo Sie anrufen " this.props.navigate ('routeName') "im Preloader