React導航在導航時轉到初始路線

以下是我的初步路線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)

我檢查這個頁面上AsyncStorage變量，並相應地重定向。我在下面的AuthAction中檢查了AsyncStorage。

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

以下是我的減速機，減速機，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;

以下是我Login.js在哪裏降落，如果有也沒有發現本地令牌。

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)

但是當我運行這段代碼。該應用程序導航這樣預載>發現沒有localtoken去登錄>開的電話號碼提交進入預載>然後登錄>然後最後OTP

爲什麼不會吧直接導航到OTP而不會去預加載器頁面？

以下是日誌世博控制檯上

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", 
    }, 
    ], 
}

來源

2017-10-04 AH.

這是因爲你改變由預加載（導航道具）收到的道具，讓你進入它的「ComponentWillRecieveProps」，這將觸發導航到登錄，你可以解決這個問題：

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

如果nextProps.localTokenStatus再次觸發導航之前，將您this.props.localTokenStatus不同進行比較，這樣就不會發生，除非localTokenStatus從您r減少變化。

編輯：這是因爲預加載器仍然存在，因爲你沒有明確它是從導航堆棧，你可以用這個功能做到這一點：

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

從而可以在那裏你打電話被稱爲「 preloader中的this.props.navigate（'routeName'）「

來源

2017-10-04 17:36:52

爲什麼在從Login到OTP頁面導航時會調用preloader？ –

檢查我的編輯，因爲我不知道如何在評論中編寫代碼。如果有幫助，請記得以upvote/flag作爲最佳答案 –

當然，所以我每次從屏幕導航到屏幕時都要這樣做？ –

React導航在導航時轉到初始路線

回答

相關問題