React-Navigation:从操​​作文件导航 [英] React-Navigation: navigate from actions file

问题描述

我是 RN 和 JS 的新手.

I'm new to RN and JS.

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

I want to navigate once a login action is complete, but I cannot get it to work. I am using firebase.

这是来自我的操作文件.它引发了一个 firebase 错误:

This is from my actions file. It throws a firebase error:

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 错误，但没有任何反应.所以似乎一切正常，除了用户没有导航到正确的屏幕.(我从上面删除了这不起作用"行)

I also tried putting it into the Login component - this might be a step in right direction because there is no firebase error, but nothing happens. So it seems that all works, except the user is not navigated to the proper screen. (I removed the 'this doesnt work' line from above)

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

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

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

Later, I also found this in the official docs and tried to implement by using this code in my action, but it threw a firebase error:

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

"dispatch - Send an action to the router

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

Use dispatch to send any navigation action to the router. The other navigation functions use dispatch behind the scenes.

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

Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.

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

See Navigation Actions Docs for a full list of available actions.

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

谢谢！

推荐答案

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

I solved a similar problem by creating a global service to handle programmatic navigation:

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() { ... }

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

Then, in my top-level component I store the reference to the navigator when it's created:

screens/App.js

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

const AppNavigator = StackNavigator(...);

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

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

And finally in my action files (or wherever I need to), I simply use the service to dispatch navigation actions:

actions/login.js

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

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

这篇关于React-Navigation:从操​​作文件导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！