如何在React Native中登录成功后从LoginForm.js跳转至product.js？

嘿，我来给你几个靠谱的实现方案，都是React Native项目用StackNavigator时常用的套路，完全适配你的场景（LoginForm嵌套在Home页面里）：

方案1：通过Props传递Navigation对象（最直接的基础方案） #

因为LoginForm是嵌套在Home页面里的，而Home作为StackNavigator的路由页面，本身就能拿到navigation对象。所以最简单的方式就是把这个对象通过props传给LoginForm，登录成功后直接调用跳转方法。

具体步骤： #

1. 在Home页面渲染LoginForm时，传入navigation属性：

// Home.js
import LoginForm from './LoginForm';
import { View } from 'react-native';

function Home({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* Home页面的其他内容 */}
      <LoginForm navigation={navigation} />
    </View>
  );
}

export default Home;

2. 在LoginForm中，登录接口请求成功后调用跳转方法：

// LoginForm.js
import { Button, TextInput, View, Alert } from 'react-native';

function LoginForm({ navigation }) {
  const handleLogin = async () => {
    try {
      // 模拟登录接口请求，替换成你的实际接口
      const response = await fetch('https://your-api-domain.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: 'test',
          password: '123456',
        }),
      });
      const data = await response.json();

      if (data.code === 200) {
        // 登录成功，跳转到Products页面
        navigation.navigate('Products');
      } else {
        Alert.alert('登录失败', data.message || '账号或密码错误');
      }
    } catch (error) {
      console.error('登录请求出错:', error);
      Alert.alert('网络异常', '请检查网络连接后重试');
    }
  };

  return (
    <View style={{ gap: 16, width: '80%' }}>
      <TextInput placeholder="用户名" />
      <TextInput placeholder="密码" secureTextEntry />
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
}

export default LoginForm;

方案2：使用React Navigation的useNavigation钩子（函数组件推荐） #

如果你的LoginForm是函数组件，React Navigation提供的useNavigation钩子可以让你不用手动传props，直接获取navigation对象，代码会更简洁清爽。

具体步骤： #

直接在LoginForm中导入并使用useNavigation：

// LoginForm.js
import { Button, TextInput, View, Alert } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function LoginForm() {
  // 直接获取navigation对象
  const navigation = useNavigation();

  const handleLogin = async () => {
    try {
      // 登录接口请求逻辑和方案1一致
      const response = await fetch('https://your-api-domain.com/login', { /* 配置 */ });
      const data = await response.json();

      if (data.code === 200) {
        navigation.navigate('Products');
      } else {
        Alert.alert('登录失败', data.message);
      }
    } catch (error) {
      console.error(error);
      Alert.alert('网络异常');
    }
  };

  return (
    <View style={{ gap: 16, width: '80%' }}>
      <TextInput placeholder="用户名" />
      <TextInput placeholder="密码" secureTextEntry />
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
}

export default LoginForm;

小贴士：如果你的LoginForm是类组件，可以用withNavigation高阶组件包裹组件，同样能拿到navigation对象，用法类似。

方案3：通过父组件回调实现跳转（解耦组件依赖） #

要是你想让LoginForm更通用，不想让它直接依赖React Navigation的API，可以让LoginForm在登录成功后触发一个父组件（Home）传递的回调，由Home来处理跳转逻辑，这样组件耦合度更低。

具体步骤： #

1. 在Home页面定义跳转回调，传递给LoginForm：

// Home.js
import LoginForm from './LoginForm';
import { View } from 'react-native';

function Home({ navigation }) {
  // 定义登录成功后的跳转逻辑
  const handleLoginSuccess = () => {
    navigation.navigate('Products');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LoginForm onLoginSuccess={handleLoginSuccess} />
    </View>
  );
}

export default Home;

2. 在LoginForm中调用回调：

// LoginForm.js
import { Button, TextInput, View, Alert } from 'react-native';

function LoginForm({ onLoginSuccess }) {
  const handleLogin = async () => {
    try {
      const response = await fetch('https://your-api-domain.com/login', { /* 配置 */ });
      const data = await response.json();

      if (data.code === 200) {
        // 触发父组件的回调，由父组件处理跳转
        onLoginSuccess();
      } else {
        Alert.alert('登录失败', data.message);
      }
    } catch (error) {
      console.error(error);
      Alert.alert('网络异常');
    }
  };

  return (
    <View style={{ gap: 16, width: '80%' }}>
      <TextInput placeholder="用户名" />
      <TextInput placeholder="密码" secureTextEntry />
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
}

export default LoginForm;

这三个方案都能完美解决你的需求，你可以根据自己的组件类型和代码风格来选：

• 要是追求简单直接，选方案1；
• 函数组件优先选方案2，代码更简洁；
• 想要组件解耦、提升复用性，选方案3。

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