React Native+Redux登录后跳转失效问题求助

嘿，我之前也遇到过React Navigation配合Redux时跳转失效的问题，结合你的情况，咱们一步步来排查解决：

1. 先解决页面刷新的问题——阻止表单默认提交行为 #

如果你的登录按钮是放在<form>标签里的，点击按钮会触发表单的默认提交动作，直接导致页面刷新，这时候你的跳转代码根本来不及执行。

解决办法很简单，在登录按钮的点击事件里加上e.preventDefault()：

// 登录组件里的点击处理函数
handleLogin = (e) => {
  e.preventDefault(); // 关键：阻止表单默认刷新行为
  // 调用你的登录action逻辑
  this.props.login(this.state.credentials);
}

然后按钮绑定这个方法：

<form>
  <!-- 用户名密码输入框 -->
  <button onClick={this.handleLogin}>登录</button>
</form>

2. Redux Action里直接用NavigationActions的坑 #

你在AuthActions.js里直接dispatch NavigationActions，其实是无效的——因为Redux action是纯函数，没有访问导航器上下文的权限，返回的跳转action根本传不到导航器那里。

推荐用全局导航引用的方式来解决：

第一步：创建NavigationService.js

import { NavigationActions } from 'react-navigation';

// 存储全局导航引用
let _navigator;

// 设置导航器引用
function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

// 封装跳转方法
function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setTopLevelNavigator,
};

第二步：在根导航器里绑定引用

import NavigationService from './NavigationService';
import { StackNavigator } from 'react-navigation';

// 你的导航配置
const AppNavigator = StackNavigator({
  Login: { screen: LoginScreen },
  Home: { screen: HomeScreen }, // 确保这个路由名称和你要跳转的完全一致
});

class App extends React.Component {
  render() {
    return (
      <AppNavigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

第三步：在AuthActions里使用全局导航

import NavigationService from '../NavigationService';

export const login = (credentials) => {
  return (dispatch) => {
    // 调用Rails API获取用户信息
    fetch('/api/v1/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(credentials)
    })
    .then(res => res.json())
    .then(user => {
      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
      // 这里用全局导航跳转，确保在API请求成功后执行
      NavigationService.navigate('Home');
    })
    .catch(err => console.log(err));
  };
};

3. 最后检查导航路由配置 #

确认你的StackNavigator/TabNavigator里确实存在'Home'这个路由，而且名称大小写完全匹配——React Navigation的路由名称是区分大小写的哦！

比如：

const MainNavigator = StackNavigator({
  // 其他路由...
  Home: { 
    screen: HomeScreen,
    navigationOptions: { title: '首页' }
  },
});

按照这几步排查下来，应该就能解决登录后跳转失效的问题了！

内容的提问来源于stack exchange，提问作者H.Akca