Question

我是RN和JS的新手。

我想在登录操作完成后导航，但我无法让它工作。我正在使用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将任何导航操作发送到路由器。其他导航功能在幕后使用调度。

请注意，如果您要发送反应导航操作，则应使用此库中提供的操作创建器。

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

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

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

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

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

屏幕/ App.js

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

const AppNavigator = StackNavigator(...);

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

最后在我的动作文件中（或我需要的任何地方），我只是使用该服务来发送导航动作：

动作/ login.js

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

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

反应导航：从操作文件

1 个答案: