如何在React Navigation的Tab Navigator间传递参数？Train传值至Statistics

你遇到的问题核心在于：route.params的initialParams仅作为初始值生效，当Train组件内的count状态更新时，不会自动同步到Statistics组件的路由参数中——毕竟Tab导航下的多个屏幕默认是同时挂载的，没有导航行为触发的话，路由参数不会主动更新。

下面给出两种靠谱的解决方案：

方案一：状态提升到Tab导航的父组件 #

这是React中处理兄弟组件状态共享的常规手段，把状态放到Tab Navigator所在的父组件中，再通过props传递给需要的子组件。

步骤1：在父组件中管理状态 #

import { useState } from 'react';
import { Tab.Navigator } from '@react-navigation/bottom-tabs';
// 导入你的Train、Statistics等组件

export default function MainTabs() {
  // 将count状态提升到父组件
  const [count, setCount] = useState(0);

  return (
    <Tab.Navigator>
      {/* Train屏幕：用render prop传递状态和更新函数 */}
      <Tab.Screen
        name="Train"
        options={{
          tabBarIcon: ({ focused }) => (
            <View>
              <Image
                source={focused ? require('../assets/images/train_use.png') : require('../assets/images/train.png')}
                style={{ width: 50, height: 50 }}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      >
        {() => <Train count={count} setCount={setCount} />}
      </Tab.Screen>

      {/* Result屏幕保持不变 */}
      <Tab.Screen
        name="Result"
        component={Result}
        options={{ tabBarButton: () => null, tabBarStyle: { display: "none" } }}
      />

      {/* Statistics屏幕：用render prop传递最新的count */}
      <Tab.Screen
        name="Statistics"
        options={{
          // 补充你的tabBarIcon配置
        }}
      >
        {() => <Statistics count={count} />}
      </Tab.Screen>

      {/* Profile屏幕保持不变 */}
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          // 补充你的tabBarIcon配置
        }}
      />
    </Tab.Navigator>
  );
}

步骤2：Train组件中使用状态 #

function Train({ count, setCount }) {
  // 直接使用父组件传递的状态和更新函数
  const handleIncrement = () => {
    setCount(prev => prev + 1);
  };

  return (
    <View>
      <Button title="增加计数" onPress={handleIncrement} />
    </View>
  );
}

步骤3：Statistics组件中获取状态 #

function Statistics({ count }) {
  // 直接使用父组件传递的最新count值
  return <Text>Train组件的计数：{count}</Text>;
}

方案二：使用React Context（适合多组件共享状态场景） #

如果你的App中有多个组件需要访问这个count状态，或者组件层级较深，用Context会更灵活。

步骤1：创建Count Context #

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

// 创建Context
const CountContext = createContext();

// 封装Provider组件
export function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

// 封装自定义Hook，简化Context调用
export function useCount() {
  return useContext(CountContext);
}

步骤2：用Provider包裹Tab导航 #

// 根组件（比如App.js）
import { CountProvider } from './CountContext';
import MainTabs from './MainTabs';

export default function App() {
  return (
    <CountProvider>
      <MainTabs />
    </CountProvider>
  );
}

步骤3：Train组件中更新状态 #

import { useCount } from './CountContext';

function Train() {
  const { setCount } = useCount();

  const handleIncrement = () => {
    setCount(prev => prev + 1);
  };

  return (
    <View>
      <Button title="增加计数" onPress={handleIncrement} />
    </View>
  );
}

步骤4：Statistics组件中获取状态 #

import { useCount } from './CountContext';

function Statistics() {
  const { count } = useCount();
  return <Text>Train组件的计数：{count}</Text>;
}

补充：为什么route.params没用？ #

initialParams只是给Tab屏幕设置初始的路由参数，一旦组件挂载完成，除非你主动调用navigation.setParams或者通过navigation.navigate传递新参数，否则路由参数不会自动更新。而Tab导航下的兄弟组件没有导航动作的话，这种方式无法实现状态的实时同步。

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