javascript - React Navigation 在导航时转到初始路线

Question

我使用expo、redux 和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)))
    }
}

以下是我的 reducer ，reducer-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，如果没有找到本地 token ，我将登陆该页面。

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)

但是当我运行这段代码时。该应用程序像这样导航预加载器> 发现没有本地 token ，将转到登录> 提交电话号码后，将转到预加载器> 然后登录>最后OTP

为什么它不会直接导航到OTP而不进入预加载器页面？

以下是expo控制台上的日志

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

这是因为您正在更改预加载器接收的 Prop (导航 Prop )，因此您将输入“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 不同，因此除非您的 redux 中的 localTokenStatus 发生更改，否则不会发生这种情况。

编辑:发生这种情况是因为预加载器仍然存在，因为您没有从导航中清除它的堆栈，您可以使用此函数来执行此操作:

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')”的地方调用它