使用react-navigation实现底部Tab栏，如何不跳转页面传递参数？

下面是几种无需页面跳转就能在Tab页面间传递参数的实现方式：

1. 全局状态管理 #

这是最通用的方案，通过全局状态存储共享数据，页面B监听状态变化即可获取参数。以轻量无依赖的Zustand为例：

实现步骤： #

• 安装Zustand：npm install zustand
• 创建全局状态store：

// stores/tabDataStore.js
import { create } from 'zustand';

export const useTabDataStore = create((set) => ({
  pageBData: null,
  setPageBData: (data) => set({ pageBData: data }),
}));

• 在页面A中更新状态：

// PageA.jsx
import { useTabDataStore } from '../stores/tabDataStore';

const PageA = () => {
  const setPageBData = useTabDataStore((state) => state.setPageBData);

  const handleSendData = () => {
    // 传递任意格式的参数
    setPageBData({ id: 1, content: '来自PageA的消息' });
  };

  return (
    <Button title="给PageB传参" onPress={handleSendData} />
  );
};

• 在页面B中监听状态变化：

// PageB.jsx
import { useTabDataStore } from '../stores/tabDataStore';
import { useEffect } from 'react';

const PageB = () => {
  const pageBData = useTabDataStore((state) => state.pageBData);

  useEffect(() => {
    if (pageBData) {
      console.log('收到PageA的参数：', pageBData);
      // 可选：处理完数据后重置状态，避免重复触发
      // useTabDataStore.getState().setPageBData(null);
    }
  }, [pageBData]);

  return (
    <Text>{pageBData ? pageBData.content : '暂无数据'}</Text>
  );
};

2. 利用React Navigation的Tab Navigator Ref #

通过获取Tab导航器的引用，直接给页面B设置参数：

实现步骤： #

• 在Tab导航器创建时保存ref：

// TabNavigator.jsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useRef } from 'react';
import PageA from './PageA';
import PageB from './PageB';

const Tab = createBottomTabNavigator();

export const TabNavigator = () => {
  const tabRef = useRef(null);

  return (
    <Tab.Navigator ref={tabRef}>
      <Tab.Screen name="PageA" component={PageA} initialParams={{ tabRef }} />
      <Tab.Screen name="PageB" component={PageB} />
    </Tab.Navigator>
  );
};

• 在页面A中通过ref给PageB设置参数：

// PageA.jsx
const PageA = ({ route }) => {
  const { tabRef } = route.params;

  const handleSendData = () => {
    // 获取PageB的navigation对象
    const pageBNavigation = tabRef.current.getScreenProps('PageB').navigation;
    // 给PageB设置参数
    pageBNavigation.setParams({ fromPageA: 'Hello from PageA' });
  };

  return (
    <Button title="给PageB传参" onPress={handleSendData} />
  );
};

• 在页面B中监听参数变化：

// PageB.jsx
import { useRoute } from '@react-navigation/native';
import { useEffect } from 'react';

const PageB = () => {
  const route = useRoute();

  useEffect(() => {
    const params = route.params?.fromPageA;
    if (params) {
      console.log('收到参数：', params);
    }
  }, [route.params]);

  return (
    <Text>{route.params?.fromPageA || '暂无数据'}</Text>
  );
};

3. 事件订阅（EventEmitter） #

通过事件发布订阅机制，页面A发布事件，页面B订阅事件接收参数：

实现步骤： #

• 创建EventEmitter实例：

// utils/eventEmitter.js
import { EventEmitter } from 'events';

export const eventEmitter = new EventEmitter();

• 在页面A中发布事件：

// PageA.jsx
import { eventEmitter } from '../utils/eventEmitter';

const PageA = () => {
  const handleSendData = () => {
    // 发布事件并传递参数
    eventEmitter.emit('pageA_to_pageB', { data: '来自PageA的事件消息' });
  };

  return (
    <Button title="给PageB传参" onPress={handleSendData} />
  );
};

• 在页面B中订阅事件，注意组件卸载时取消订阅：

// PageB.jsx
import { eventEmitter } from '../utils/eventEmitter';
import { useEffect } from 'react';

const PageB = () => {
  useEffect(() => {
    const handleEvent = (params) => {
      console.log('收到事件参数：', params);
    };
    // 订阅事件
    eventEmitter.on('pageA_to_pageB', handleEvent);

    // 组件卸载时取消订阅，避免内存泄漏
    return () => {
      eventEmitter.off('pageA_to_pageB', handleEvent);
    };
  }, []);

  return <Text>等待接收参数...</Text>;
};

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