React Native页面跳转问题：无法导航至Home.js求助

核心问题分析 #

• 错误混用了Web端路由库react-router-dom和React Native专用的@react-navigation/native，两者完全不兼容
• 未正确配置导航栈结构，navigation对象未被注入到组件中，导致调用navigation.navigate时报错
• 代码存在未闭合的JSX标签（TouchableOpacity、SafeAreaView等），会导致渲染失败

分步修复方案 #

1. 清理无效依赖 #

删除所有react-router-dom相关的导入，React Native项目不需要这个Web端路由库：

// 移除该行无效导入
import {Route, BrowserRouter as Router, Switch, Link, Navigate, NavigationType} from 'react-router-dom';

2. 正确配置Stack导航结构 #

必须将页面组件注册到Stack导航器中，并用NavigationContainer包裹整个导航结构，这是React Native导航的基础要求：

• 创建Stack导航实例
• 定义路由（包含当前登录页和目标Home页）
• 确保组件处于导航栈内，才能获取到navigation对象

3. 正确获取navigation对象 #

在导航栈内的组件，可以通过useNavigation钩子直接获取navigation对象，用于页面跳转。

完整修正代码 #

import {
  StyleSheet, 
  Text, 
  SafeAreaView, 
  Image,
  View,
  TouchableOpacity,
} from 'react-native';
import React,{ useState, useNavigation } from 'react';
import {Card} from 'react-native-shadow-cards';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 导入你的Home组件，注意路径要和实际文件匹配
import Home from './Home';

const Stack = createStackNavigator();

// 将当前登录页抽成独立的屏幕组件，用于注册到导航栈
function LoginScreen() {
  const navigation = useNavigation();
  const [name,setName] = useState("");
  const shadowstyle={
    shadowOpacity:1
  };
  
  const handlePress = () => navigation.navigate('Home');
  
  return ( 
    <SafeAreaView style={styles.container}>
      <Image 
        source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
      <Image 
        source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
      <Text style={styles.titleText} onPress={handlePress}>GTipz </Text>
      <Image 
        source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/GtipzLogo.png")} />
      <View>
        <Image 
          source={require("/Users/travisnunnally/Malik Projects VSCODE/Gtipz/assets/Star.png")} />
      </View>
      <TouchableOpacity onPress={handlePress}>
        <View style={[styles.buttonContainer, styles.userImageWrapper]}>
          <Text style={styles.buttonText}>Login</Text>
        </View>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

export default function App() {
  return ( 
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 补充样式示例（根据你的需求调整）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginVertical: 10,
  },
  buttonContainer: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
  userImageWrapper: {
    // 自定义样式
  }
});

关键说明 #

• 所有需要跳转的页面必须注册到Stack.Navigator中，name属性要和navigation.navigate的参数一致
• useNavigation钩子只能在导航栈内的组件中使用，顶层App组件因为被NavigationContainer包裹，无法直接获取，所以必须将登录页抽成独立屏幕组件
• 确保Home.js的文件路径正确，导入时不要写错相对路径

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