React Native中不跳转屏幕，如何向其他屏幕传递数据？

你需要的是提前存储数据，后续进入目标屏幕时读取，而非通过navigation.navigate的参数传递（该方法绑定跳转行为）。以下是几种实用方案：

方法1：全局状态管理（Context API，轻量首选） #

通过React内置的Context API维护全局数据，无需第三方库，适合跨组件/屏幕共享临时数据。

步骤1：创建数据Context #

// DataContext.js
import React, { createContext, useState, useContext } from 'react';

const DataContext = createContext();

export const DataProvider = ({ children }) => {
  // 存储目标屏幕需要的数据
  const [targetScreenData, setTargetScreenData] = useState(null);

  return (
    <DataContext.Provider value={{ targetScreenData, setTargetScreenData }}>
      {children}
    </DataContext.Provider>
  );
};

// 自定义Hook简化调用
export const useData = () => useContext(DataContext);

步骤2：在根组件包裹Provider #

确保所有屏幕都能访问Context：

// App.js
import { DataProvider } from './DataContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航栈/结构

export default function App() {
  return (
    <DataProvider>
      <NavigationContainer>
        {/* 你的导航配置，比如StackNavigator */}
      </NavigationContainer>
    </DataProvider>
  );
}

步骤3：源屏幕存储数据（无跳转） #

import { useData } from './DataContext';

function SourceScreen() {
  const { setTargetScreenData } = useData();

  const saveDataForLater = () => {
    const dataToStore = { name: '示例数据', id: 456, details: '这是要传递的对象' };
    setTargetScreenData(dataToStore);
    // 执行后仅存储数据，不会跳转
  };

  return (
    {/* 你的UI，比如按钮触发saveDataForLater */}
    <Button title="保存数据到目标屏幕" onPress={saveDataForLater} />
  );
}

步骤4：目标屏幕读取数据 #

import { useData } from './DataContext';

function TargetScreen() {
  const { targetScreenData } = useData();

  return (
    <View>
      {targetScreenData ? (
        <Text>
          名称：{targetScreenData.name}，ID：{targetScreenData.id}，详情：{targetScreenData.details}
        </Text>
      ) : (
        <Text>暂无数据</Text>
      )}
    </View>
  );
}

方法2：本地存储（AsyncStorage，持久化数据） #

如果需要数据在APP重启后仍保留，使用本地存储更合适。

源屏幕存储数据 #

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

function SourceScreen() {
  const storeDataLocally = async () => {
    const dataToStore = { name: '持久化数据', id: 789 };
    try {
      // 对象需转为JSON字符串存储
      const jsonValue = JSON.stringify(dataToStore);
      await AsyncStorage.setItem('targetScreenData', jsonValue);
    } catch (error) {
      console.error('存储数据失败：', error);
    }
  };

  return (
    <Button title="持久化保存数据" onPress={storeDataLocally} />
  );
}

目标屏幕读取数据 #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

function TargetScreen() {
  const [storedData, setStoredData] = useState(null);

  useEffect(() => {
    const fetchStoredData = async () => {
      try {
        const jsonValue = await AsyncStorage.getItem('targetScreenData');
        setStoredData(jsonValue ? JSON.parse(jsonValue) : null);
      } catch (error) {
        console.error('读取数据失败：', error);
      }
    };

    fetchStoredData();
  }, []);

  return (
    <View>
      {storedData ? (
        <Text>名称：{storedData.name}，ID：{storedData.id}</Text>
      ) : (
        <Text>暂无持久化数据</Text>
      )}
    </View>
  );
}

方法3：预存导航参数（仅限目标屏幕已在栈中） #

如果目标屏幕已经存在于导航栈中（比如之前打开过），可以直接给它设置路由参数：

// 源屏幕设置参数
function SourceScreen({ navigation }) {
  const setTargetParams = () => {
    const dataToSend = { name: '栈内数据', id: 101 };
    // 通过getParent获取导航栈，给目标屏幕设置参数
    navigation.getParent()?.setParams({ targetData: dataToSend });
  };
}

// 目标屏幕读取参数
function TargetScreen({ route }) {
  const targetData = route.params?.targetData;
  return (
    <View>
      {targetData && <Text>名称：{targetData.name}，ID：{targetData.id}</Text>}
    </View>
  );
}

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