リアクションナビゲーションはナビゲート中に初期ルートに移動します

私はexpo、redux、およびリアクションナビゲーションを使用します。リアクションナビゲーションはナビゲート中に初期ルートに移動します

私の最初のルート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」、だ入力しますナビゲーションは、あなたがこの問題を解決することができ、ログインします

nextProps.localTokenStatusが再びナビゲーションをトリガする前に、あなたのthis.props.localTokenStatusと異なる場合に比較して、それはからlocalTokenStatusない限り発生しません

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

君はr還元が変化する。

EDIT：プリローダーはまだあなたがそれは、ナビゲーションからの積み重ねだ明確でなかったので、あなたがこの機能を行うことができますが存在するので、これは起こります：あなたが呼んでいる場所を呼び出すことができます

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

」プリローダーのthis.props.navigate（ 'routeName'）

出典

2017-10-04 17:36:52

ログインからOTPページに移動するとプリローダーが呼び出されるのはなぜですか？ –

私のEDITをチェックしてください。コメントにコードを書く方法はまだ分かりません。役に立つ場合は、最善の答えとしてupvote/flagを覚えておいてください。 –

確かに、画面から画面にナビゲートするたびにこれを行う必要がありますか？ –

リアクションナビゲーションはナビゲート中に初期ルートに移動します

答えて

関連する問題