react-native - React-Navigation:从操​​作文件导航

Question

我是 RN 和 JS 新手。

我想在登录操作完成后进行导航，但无法使其工作。我正在使用 firebase。

这是来 self 的操作文件。它抛出一个 firebase 错误:

export const LOGIN_USER_SUCCESS = 'login_user_success';
export const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });
    this.props.navigation.navigate('groupMain');     // this doesnt work
};

我还尝试将其放入登录组件中 - 这可能是朝着正确方向迈出的一步，因为没有 firebase 错误，但什么也没有发生。所以看起来一切都有效，除了用户没有导航到正确的屏幕。 (我从上面删除了“这不起作用”行)

componentWillReceiveProps(nextProps) {
    this.onAuthComplete(nextProps);
  }

  onAuthComplete(props) {
    if (props.user) {
      this.props.navigation.navigate('groupMain');
    }
  }

后来我也在官方文档中找到了这个，并尝试在我的action中使用这段代码来实现，但它抛出了firebase错误:

“dispatch - 向路由器发送操作

使用调度将任何导航操作发送到路由器。其他导航功能在幕后使用调度。

请注意，如果您想分派(dispatch) react 导航操作，您应该使用此库中提供的操作创建器。

请参阅导航操作文档以获取可用操作的完整列表。

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},

  // navigate can have a nested navigate action that will be run inside the child router
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)"

谢谢!

Answer 1

我通过创建一个全局服务来处理编程导航解决了类似的问题:

services/navigator.js

import { NavigationActions } from 'react-navigation';

let navigator;

export function setNavigator(nav) {
   navigator = nav;
}

export function navigate(routeName, params) {
   if (navigator) { 
      navigator.dispatch(NavigationActions.navigate({routeName, params}));
   }
}

export function goBack() { ... }

export function reset() { ... }

然后，在我的顶级组件中，我在创建导航器时存储对导航器的引用:

screens/App.js

import { setNavigator } from '../services/navigator';

const AppNavigator = StackNavigator(...);

class App extends Component {
   render() {
      return (
         <AppNavigator ref={nav => setNavigator(nav)} />
      );
   }
}

最后，在我的操作文件(或任何我需要的地方)中，我只需使用该服务来调度导航操作:

actions/login.js

import { navigate } from '../services/navigator';

export function loginUserSuccess() {
   // use navigate() anywhere you'd normally use this.props.navigation.navigate()
   navigate('NextScreen');
}