React Native点击Button跳转至其他页面功能实现问题求助

代码核心问题 #

• 函数组件不能使用this.props.navigation获取导航实例，你已经导入了useNavigation Hook，直接调用即可获取导航对象
• 混淆了React Navigation版本：你同时导入了新版@react-navigation/native的API和旧版react-navigation的createStackNavigator、createAppContainer，二者不兼容
• 没有配置完整的导航路由结构：Profile页面未注册到导航栈中，无法通过路由名称调用跳转
• 代码中使用了StatusBar组件但没有从react-native中导入，会触发编译报错

修正步骤 #

1. 先安装对应版本的依赖（已安装可跳过）：

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

2. 使用修正后的完整代码：

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  StatusBar // 补全缺失的组件导入
} from "react-native";   
import { NavigationContainer } from '@react-navigation/native'; 
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';

// Profile页面组件，如果你已经单独定义过Profile页面，直接导入替换即可
function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>这是Profile页面</Text>
    </View>
  );
}

// 原首页组件
function HomeScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  // 调用useNavigation获取导航实例
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./assets/logo.png")} />
      <StatusBar style="auto" />
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Benutzername"
          onChangeText={(email) => setEmail(email)}
        />
      </View>
      <Button  
          style={styles.loginBtn}
          title="Go to Profile"  
          // 调用导航实例实现跳转
          onPress={() => navigation.navigate('Profile')}  
      />  
    </View>
  );
}

// 创建栈导航实例
const Stack = createNativeStackNavigator();

export default function App() {
  return (
    // 最外层必须包裹NavigationContainer容器
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        {/* 注册首页路由 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 注册Profile路由，名称要和跳转时调用的字符串完全一致 */}
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 示例样式，可保留你原有样式配置
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 40,
  },
  inputView: {
    width: "80%",
    backgroundColor: "#F1F0F0",
    borderRadius: 25,
    height: 50,
    marginBottom: 20,
    justifyContent: "center",
    padding: 20
  },
  TextInput: {
    height: 50,
  },
  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "#FF1493",
  }
});

修改后重新运行项目即可实现预期的跳转效果。

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