React Native页面间传值方法咨询：新手导航传参难题

Hey there! As someone new to React Native, navigation params can feel a bit tricky at first, but let's break this down step by step—fixing your current code and covering all the right ways to pass data between screens.

First, Fix Your Navigation Code #

Let's start with the small issues in your current snippet:

• You don't need to destructure navigation from this.props.navigation—it's directly on this.props for class components.
• The navigation method is navigation.push() (not navigate.push), and you need to pass the screen name (as a string, matching what you defined in your navigation stack), not the component itself.

Here's the corrected version:

// Inside your class component
const { navigation } = this.props;

// Then in your Alert button config
{ 
  text: 'Done', 
  onPress: () => {
    // We'll add params here next
    navigation.push('HomeScreen'); 
  }
}

1. Basic Screen-to-Screen Params (Most Common Use Case) #

This is the standard way to pass temporary, screen-specific data (like a post ID, user details, or form input). You just attach a params object to your navigation call, then retrieve it from the target screen's route prop.

Step 1: Pass Params When Navigating #

Update your onPress handler to include the data you want to send:

onPress: () => {
  navigation.push('HomeScreen', {
    userName: 'Saranjith',
    userId: 456,
    isReturningUser: true
  });
}

Step 2: Retrieve Params in the Target Screen #

How you get the params depends on whether you're using a class component or function component:

Class Component (HomeScreen)

class HomeScreen extends React.Component {
  componentDidMount() {
    // Access route from props
    const { route } = this.props;
    
    // Use optional chaining (?.) to avoid errors if params are missing
    const userName = route.params?.userName;
    const userId = route.params?.userId;
    
    console.log('Received data:', userName, userId);
  }

  render() {
    const { route } = this.props;
    return (
      <Text>Welcome back, {route.params?.userName}!</Text>
    );
  }
}

Function Component (HomeScreen)

Use the useRoute hook from React Navigation:

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

function HomeScreen() {
  const route = useRoute();
  
  // Destructure params with a fallback empty object to prevent errors
  const { userName, userId, isReturningUser } = route.params || {};

  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Text>Returning: {isReturningUser ? 'Yes' : 'No'}</Text>
    </View>
  );
}

2. Global Parameters: Should You Use Them? #

You can use global state to pass data, but it's not ideal for one-off screen-to-screen transfers. Global state is better for data that needs to be shared across many screens (like user auth status, app theme, or shopping cart data).

If you do need global data, here's a simple implementation using React Context (no external libraries needed):

Step 1: Create a Context #

Make a new file (e.g., AppContext.js):

import React, { createContext, useState, useContext } from 'react';

// Create the context
const AppContext = createContext();

// Create a provider component to wrap your app
export function AppProvider({ children }) {
  // Define your global state
  const [globalUserData, setGlobalUserData] = useState(null);

  return (
    <AppContext.Provider value={{ globalUserData, setGlobalUserData }}>
      {children}
    </AppContext.Provider>
  );
}

// Custom hook to access the context easily
export function useAppContext() {
  return useContext(AppContext);
}

Step 2: Wrap Your App with the Provider #

In your App.js, wrap your navigation container with the provider:

import { AppProvider } from './AppContext';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <AppProvider>
      <NavigationContainer>
        {/* Your navigation stack goes here */}
      </NavigationContainer>
    </AppProvider>
  );
}

Step 3: Set Global Data in the Source Screen #

import { useAppContext } from './AppContext';

// For function components
function SourceScreen() {
  const { setGlobalUserData } = useAppContext();
  const { navigation } = this.props; // For class components, use this.props.navigation

  return (
    <Button
      title="Done"
      onPress={() => {
        // Set global data
        setGlobalUserData({ userName: 'Saranjith', userId: 456 });
        // Navigate to HomeScreen
        navigation.push('HomeScreen');
      }}
    />
  );
}

Step 4: Access Global Data in HomeScreen #

import { useAppContext } from './AppContext';

function HomeScreen() {
  const { globalUserData } = useAppContext();

  return (
    <Text>Welcome, {globalUserData?.userName}!</Text>
  );
}

3. What's the "Right" Way? #

• Use navigation params for temporary, screen-specific data (e.g., passing a product ID to a detail screen). It's straightforward and keeps data tied to the navigation flow.
• Use global state only when data needs to be accessed across multiple unrelated screens (e.g., user profile info that shows up in headers, settings, and profile screens). Avoid using it for one-off transfers—it adds unnecessary complexity.

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