React Native(Expo)跨屏幕参数持久化及深层数据传递方案咨询

Hey there! Let's break down your problem and figure out the best solutions for you.

First, the reason your updated itemId resets when navigating back is that React Navigation's route params aren't designed for persistent state storage. setParams updates the params temporarily for the current screen instance, but if the screen gets unmounted (like in edge cases of memory cleanup, or if your navigation flow recreates the screen), it'll fall back to the initialParams value. Params are meant for passing initial data or temporary route-specific info, not long-term state that needs to stick around across navigation.

1. Fixing Persistent State Across Screens #

Here are three reliable approaches to keep your state intact no matter how you navigate between screens:

Option A: Lightweight Global State (Zustand)

Zustand is a minimal, easy-to-setup state management library perfect for React Native. It avoids the boilerplate of heavier tools like Redux while keeping your state accessible everywhere.

First install it:

npm install zustand
# or yarn add zustand

Create a store file (e.g., useItemStore.js):

import { create } from 'zustand';

export const useItemStore = create((set) => ({
  itemId: 42, // Match your initial value
  updateItemId: (newId) => set({ itemId: newId }),
}));

Update your screens to use the store:

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useItemStore } from './useItemStore';

function HomeScreen({ navigation }) {
  const itemId = useItemStore((state) => state.itemId);
  const updateItemId = useItemStore((state) => state.updateItemId);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Button
        title="Update param"
        onPress={() => updateItemId(Math.floor(Math.random() * 100))}
      />
      <Button
        title="Other"
        onPress={() => navigation.navigate("Other")}
      />
    </View>
  );
}

function OtherScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Other Screen</Text>
      <Button
        title="Home"
        onPress={() => navigation.navigate("Home")}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          // No need for initialParams anymore
        />
        <Stack.Screen
          name="Other"
          component={OtherScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Now your itemId will stay updated even when navigating back and forth.

Option B: React Context (No External Libraries)

If you prefer sticking to built-in React tools, Context works great for smaller apps or focused state sections.

Create a context file (e.g., ItemContext.js):

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

const ItemContext = createContext();

export function ItemProvider({ children }) {
  const [itemId, setItemId] = useState(42);

  const updateItemId = (newId) => setItemId(newId);

  return (
    <ItemContext.Provider value={{ itemId, updateItemId }}>
      {children}
    </ItemContext.Provider>
  );
}

export function useItemContext() {
  return useContext(ItemContext);
}

Wrap your app with the provider:

export default function App() {
  return (
    <ItemProvider>
      <NavigationContainer>
        {/* Your navigator code here */}
      </NavigationContainer>
    </ItemProvider>
  );
}

Then use it in HomeScreen:

function HomeScreen({ navigation }) {
  const { itemId, updateItemId } = useItemContext();

  // Rest of your UI code remains the same
}

Option C: Local Storage (Persist Across App Restarts)

If you need the value to survive app closures and reopens, use expo-async-storage (or expo-secure-store for sensitive data):

Install it first:

npx expo install expo-async-storage

Here's how to integrate it into your screen:

import AsyncStorage from '@react-native-async-storage/async-storage';

function HomeScreen({ navigation }) {
  const [itemId, setItemId] = React.useState(42);

  // Load saved value when the screen mounts
  React.useEffect(() => {
    const loadSavedId = async () => {
      const savedId = await AsyncStorage.getItem('itemId');
      if (savedId) setItemId(parseInt(savedId));
    };
    loadSavedId();
  }, []);

  const updateItemId = async (newId) => {
    setItemId(newId);
    await AsyncStorage.setItem('itemId', newId.toString());
  };

  // Your UI code here, using updateItemId for the button press
}

2. Deep Data Transfer Between Components/Screens #

For deep component trees, passing props down every level ("prop drilling") gets messy quickly. The best fixes are:

• Global State Management: As shown above (Zustand, Redux, Jotai), this lets any component access state directly without prop chains.
• React Context: Ideal for smaller apps or isolated state sections, keeping related state bundled together.
• Component Composition: Instead of passing props, pass child components directly to parents so they can access state without drilling (better for UI components than screen-wide state).

Is Using Route Params This Way Correct? #

Using initialParams and setParams is totally fine for temporary, route-specific data (like passing an item ID to a detail screen when navigating to it). But it's not the right tool for state that needs to persist across navigation or app restarts—params are tied to the route instance and aren't built for long-term storage.

备注：内容来源于stack exchange，提问作者Soras