React Native新手求助：Redux Form提交后无法通过react-navigation跳转页面

嘿，作为React Native新手碰到这种问题太正常了，我来帮你一步步排查解决：

1. 先确保组件能拿到导航对象 #

用react-navigation的时候，你的SignUpScreen或者子组件SignUpForm必须能访问到navigation prop才行。如果SignUpForm是SignUpScreen的子组件，记得把导航prop传过去：

在SignUpScreen.js里渲染表单时：

<SignUpForm navigation={this.props.navigation} />

另外要确认SignUpScreen已经正确注册到你的导航栈里，这样它才能接收到navigation prop哦。

2. 在Redux Form的提交函数里处理跳转 #

Redux Form的handleSubmit需要绑定一个处理提交的函数，你要在这个函数里完成表单逻辑后，调用导航的跳转方法。举个例子，在SignUpForm.js里：

import { reduxForm, Field } from 'redux-form';
import { View, TouchableOpacity, Text } from 'react-native';

class SignUpForm extends Component {
  // 处理表单提交的函数
  onSubmit = (formValues) => {
    // 先写你的表单提交逻辑，比如发请求给后端
    // 成功之后执行跳转
    this.props.navigation.navigate('HomeScreen'); // 替换成你实际要跳转的页面名称
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <View>
        {/* 这里放你的表单字段，比如Field组件 */}
        <Field name="email" component={/* 你的输入组件 */} />
        <Field name="password" component={/* 你的输入组件 */} />
        
        {/* 提交按钮绑定handleSubmit */}
        <TouchableOpacity onPress={handleSubmit(this.onSubmit)} style={{marginTop:20}}>
          <Text>完成注册</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

// 用reduxForm包裹组件，指定表单名称
export default reduxForm({
  form: 'signUp'
})(SignUpForm);

3. 异步提交的话要等操作完成再跳转 #

如果你的提交逻辑是异步的（比如调用API），一定要等异步操作完成后再跳转，用async/await会更清晰：

onSubmit = async (formValues) => {
  try {
    // 等待异步提交完成
    await yourApiService.signUp(formValues);
    // 成功后跳转
    this.props.navigation.navigate('HomeScreen');
  } catch (error) {
    // 处理错误，比如提示用户注册失败
    console.error('注册出错啦:', error);
  }
};

4. 检查导航栈配置是否正确 #

最后确认你的导航配置文件（比如AppNavigator.js）里已经注册了要跳转的页面：

import { createStackNavigator } from '@react-navigation/stack';
import SignUpScreen from './SignUpScreen';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="SignUp">
      <Stack.Screen name="SignUp" component={SignUpScreen} />
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
  );
}

export default AppNavigator;

容易踩的小坑 #

• 别在Redux的action creator里直接跳转（除非你用了旧版的react-navigation-redux-helpers，但现在v5+更推荐直接用组件里的navigation prop）
• 如果你的表单组件用connect连接了Redux，记得用withNavigation高阶组件包裹，这样即使组件不是导航栈的直接子节点，也能拿到navigation prop：

import { withNavigation } from '@react-navigation/native';

// 导出时包裹组件
export default withNavigation(reduxForm({ form: 'signUp' })(SignUpForm));

按照这些步骤排查，应该就能解决提交后无法跳转的问题啦！

内容的提问来源于stack exchange，提问作者Fadi