React Native登录页跳转注册页功能故障求助

Hey there! Let's troubleshoot why your login-to-register navigation isn't working. Based on your setup (with UserLogin.js and register.js in the Components folder, and Navigation.js in the Navigation folder), here are the most common fixes to get your button working:

1. Verify Your Navigation Configuration (Navigation.js) #

First, make sure your navigation stack includes the Register screen and the routes are set up correctly. If you're using React Navigation 6+ (the most common modern version), your Navigation.js should look like this:

// Navigation/Navigation.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import UserLogin from '../Components/UserLogin';
import Register from '../Components/register'; // Note: Match your actual filename case (register.js vs Register.js)

const Stack = createStackNavigator();

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        {/* Login screen */}
        <Stack.Screen 
          name="Login" 
          component={UserLogin} 
          options={{ title: 'Login' }} 
        />
        {/* Register screen - make sure the name matches what you use to navigate */}
        <Stack.Screen 
          name="Register" 
          component={Register} 
          options={{ title: 'Create Account' }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Key checks here:

• Double-check the import path for Register matches your actual file structure (since your file is named register.js, the import should be ../Components/register unless you renamed it).
• Ensure the name prop for the Register screen is exactly what you'll use in the navigation.navigate() call (case-sensitive!).

2. Fix the Navigation Call in UserLogin.js #

Your UserLogin component needs access to the navigation object to trigger the jump. There are two common ways to do this:

Option A: Use Navigation Props (for function or class components) #

If your component receives props directly, destructure navigation and use it in the button's onPress:

// Components/UserLogin.js
import React from 'react';
import { View, Button, TextInput } from 'react-native';

export default function UserLogin({ navigation }) { // Destructure navigation from props
  // Your login logic here

  return (
    <View style={{ padding: 20 }}>
      {/* Your login inputs and submit button */}
      <TextInput placeholder="Email" />
      <TextInput placeholder="Password" secureTextEntry />
      
      {/* The Register button */}
      <Button
        title="Don't have an account? Register"
        onPress={() => navigation.navigate('Register')} // Match the route name from Navigation.js
      />
    </View>
  );
}

Option B: Use useNavigation Hook (for function components only) #

If your component doesn't receive navigation props (e.g., if it's nested in another component), use the useNavigation hook:

// Components/UserLogin.js
import React from 'react';
import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native'; // Import the hook

export default function UserLogin() {
  const navigation = useNavigation(); // Get the navigation object

  return (
    <View>
      {/* Your login UI */}
      <Button
        title="Register"
        onPress={() => navigation.navigate('Register')}
      />
    </View>
  );
}

3. Confirm Your App Wraps Everything in NavigationContainer #

Make sure your root App.js uses the navigation component you created, so all screens have access to the navigation context:

// App.js
import AppNavigation from './Navigation/Navigation';

export default function App() {
  return <AppNavigation />;
}

Common Pitfalls to Double-Check #

• Case Sensitivity: On iOS, filenames and route names are case-sensitive. If your file is register.js, don't import it as Register (unless you've set up aliases). The route name Register must match exactly in both Navigation.js and navigation.navigate().
• Missing Dependencies: Ensure you've installed all required navigation packages:

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

• Component Exports: Make sure register.js exports the component correctly (either export default Register or a named export that matches your import).

Once you've checked these steps, your register button should successfully navigate from the login screen to the registration screen!

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