React Native如何向Tab屏幕传递数据且不切换页面？

navigation.navigate的设计目的就是触发屏幕跳转，要实现只传数据不跳转，你可以用以下几种方法：

方法一：用setParams（目标屏幕已在导航栈时适用） #

如果Statistics屏幕已经在当前导航栈中，直接调用setParams就能给它传递参数，不会触发跳转：

navigation.setParams({ wordsInText: wordsInText });

在Statistics屏幕中，你可以通过route.params.wordsInText读取到传递的数据。注意：如果目标屏幕不在导航栈里，这个方法无效。

方法二：用全局状态管理（跨屏幕/目标屏幕不在栈中时适用） #

如果需要跨多个屏幕共享数据，或者目标屏幕不在当前导航栈里，推荐用全局状态管理方案，比如Context API、Redux或者Zustand。这里以Context API为例：

1. 创建数据上下文：

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

const WordDataContext = createContext();

export function WordDataProvider({ children }) {
  const [wordsInText, setWordsInText] = useState(null);
  return (
    <WordDataContext.Provider value={{ wordsInText, setWordsInText }}>
      {children}
    </WordDataContext.Provider>
  );
}

export function useWordData() {
  return useContext(WordDataContext);
}

2. 在根组件中用Provider包裹导航容器：

import { WordDataProvider } from './WordDataContext';
import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <WordDataProvider>
      <NavigationContainer>
        {/* 你的导航结构 */}
      </NavigationContainer>
    </WordDataProvider>
  );
}

3. 在需要传数据的组件中更新状态：

import { useWordData } from './WordDataContext';

// 你的组件函数
function YourComponent() {
  const { setWordsInText } = useWordData();

  // 触发数据传递（不会跳转）
  const handlePassData = () => {
    setWordsInText(你的数据内容);
  };

  return <Button onPress={handlePassData} title="传递数据" />;
}

4. 在Statistics屏幕中读取数据：

import { useWordData } from './WordDataContext';

function StatisticsScreen() {
  const { wordsInText } = useWordData();

  return <Text>{wordsInText}</Text>;
}

方法三：嵌套导航下用父组件状态传递 #

如果Statistics是当前屏幕的子导航组件，你可以在父组件中维护状态，通过嵌套导航的props或者useRoute将数据传递给子屏幕，这种方式也不会触发跳转。

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