在哪里实现导航代码以使用 redux 和 react-navigation 移动下一个屏幕

Question

我正在使用react-native、redux 和react-navigation 构建一个移动应用程序。

我一直在考虑哪个代码应该有一个关于屏幕转换的功能（例如this.props.navigation.navigate('NextScreen')）。

例如，在我的应用中，登录过程如下。

Sign In Process

如您所见，应用程序在登录屏幕的 handleSignIn 函数中运行 this.props.navigation.navigate()。

[问题]

• 状态中的uid值有时为空，如果用户登录成功则应填写，但有时不填写。我该如何解决？
• this.props.navigator.navigator()在screen组件中定义的函数中执行，好不好？

有我的代码。

• 登录屏幕

import React, { Component } from 'react';
import { ActivityIndicator, Keyboard, KeyboardAvoidingView, StyleSheet } from 'react-native';
import { connect } from 'react-redux';

: 

class SignIn extends Component {

  async handleSignIn() {
    const { navigation, requestSignIn } = this.props;
    const { uid, email, password, error } = this.props.auth;
    Keyboard.dismiss();

    requestSignIn(email, password);

    // sometimes this uid is blank
    if (uid) {
      alert('success');

      // this function should be executed here?
      navigation.navigate('Match', { uid: uid });
    } else {
      alert(error);
    }
  }

  render() {
    const { navigation, changeText } = this.props;
    const { email, password, loading } = this.props.auth;

    return (
     :
            <Button gradient onPress={() => this.handleSignIn()}>
              { loading ?
                <ActivityIndicator size='small' color='white' /> :
                <Text bold white center>Sign In</Text>
              }
            </Button>
     :
    )
  }
}

const mapStateToProps = state => {
  return {
    auth: state.auth
  }
};
const mapDispatchToProps = dispatch => {
  return {
    requestSignIn: (email, password) => dispatch(auth.requestSignIn(email, password)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

:

• 动作

:
export const REQUEST_SIGN_IN_SUCCESS = 'REQUEST_SIGN_IN_SUCCESS';
export const REQUEST_SIGN_IN_FAILURE = 'REQUEST_SIGN_IN_FAILURE';

export function requestSignIn(email, password) {
  return async function (dispatch) {
    // change loading status
    dispatch(startedRequest());

    if (email && password) {
      await firebase.auth().signInWithEmailAndPassword(email, password)
        .then(response => {
          if (response) {
            // save email and password in local secure storage.
            SecureStorage.setItem('email', email);
            SecureStorage.setItem('password', password);

            dispatch(requestSignInSuccess(response.user.uid))
          } else {
            return Promise.resolve(new Error(response));
          }
        })
        .catch(error => {
          switch (error.code) {
            case 'auth/user-not-found':
              dispatch(requestSignInFailure('user not found'));
              break;
            case 'auth/invalid-email':
              dispatch(requestSignInFailure('invalid email'));
              break;
            default:
              dispatch(requestSignInFailure('something went wrong'))
          }
        })

    } else {
      dispatch(requestSignInFailure('error message from else statement'))
    }
  }
}

export function requestSignInSuccess(uid) {
  return {
    type: REQUEST_SIGN_IN_SUCCESS,
    payload: {
      uid: uid
    }
  }
}

export function requestSignInFailure(errorMessage) {
  return {
    type: REQUEST_SIGN_IN_FAILURE,
    payload: {
      errorMessage: errorMessage
    }
  }
}

• 减速机

import * as ActionType from '../actions/auth';

const initialState = {
  uid: '',
  email: '',
  password: '',
  isLoading: false,
  error: {
    message: ''
  }
};

const auth = (state=initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    case ActionType.STARTED_REQUEST:
      return Object.assign({}, state, {
        isLoading: true
      });
    case ActionType.CHANGE_TEXT:
      return Object.assign({}, state, {
        [payload.key]: payload.value
      });
    case ActionType.REQUEST_SIGN_IN_SUCCESS:
      return Object.assign({}, state, {
        uid: payload.uid,
        isLoading: false,
      });
    case ActionType.REQUEST_SIGN_IN_FAILURE:
      return Object.assign({}, state, {
        isLoading: false,
        error: {
          message: payload.errorMessage,
        },
      });
    default:
      return { ...state };
  }
};

export default auth;

Answer 1

首先，是的，您应该在登录业务逻辑工作后导航到该组件。

关于第二个问题，使用“requestSignIn”方法是错误的。你需要从 requestSignIn 方法发送一个回调，它应该是这样的：

requestSignIn((result) => {
  if(result){
    const { uid } = result;
    uid && navigate("Match", {uid});
  }
})

正如我在您的操作中看到的，您已经发送了一个调度，因此，它应该像上面的示例一样工作。

为什么它不符合你的逻辑？

这很简单，因为它没有同步，它只是进入下一个 if 检查，所以它不会等到 requestSignIn 方法完成。你甚至可以使用 async/await 但 dispatch (Promise) 会为你解决它:)

最后一件事，我建议您使用React Navigation Helpers 来处理所有导航逻辑。我已经写了它，它为你解决了很多肮脏的逻辑:)

Answer 2

关于第二个问题，我点击这个链接。

https://github.com/daose/react-native-template/issues/1

最后，我在操作中使用NavigationActions 而不是this.props.navigation.navigate()