React-Navigation：从动作文件导航答案

【问题标题】：React-Navigation: navigate from actions fileReact-Navigation：从动作文件导航
【发布时间】：2017-11-29 15:49:45
【问题描述】：

我是 RN 和 JS 的新手。

我想在登录操作完成后导航，但我无法让它工作。我正在使用 Firebase。

这是来自我的操作文件。它会引发 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
};

我还尝试将其放入 Login 组件中——这可能是朝着正确方向迈出的一步，因为没有 firebase 错误，但什么也没有发生。所以似乎一切正常，除了用户没有导航到正确的屏幕。（我从上面删除了“这不起作用”行）

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

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

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

"dispatch - 向路由器发送一个动作

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

请注意，如果您想调度 react-navigation 操作，您应该使用此库中提供的操作创建器。

有关可用操作的完整列表，请参阅导航操作文档。

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

谢谢！

【问题讨论】：

标签： react-native react-navigation

【解决方案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');
}

【讨论】：