React Navigation 6.x 底部标签导航点击首屏按钮不跳转如何传数据到次屏

方案1：使用dispatch方法修改Screen2参数（符合你要使用dispatch的预期） #

代码修改点： #

1. 从@react-navigation/native导入CommonActions

import { NavigationContainer, CommonActions } from '@react-navigation/native';

2. 给Screen2添加初始参数，避免首次进入时参数为空报错

<Tab.Screen
  name="Screen2"
  component={Screen2}
  options={{
    tabBarLabel: 'Screen 2',
  }}
  initialParams={{ item: '' }}
/>

3. 修改Screen1中add按钮的点击事件，替换原有navigation.navigate逻辑

<Button 
  title="add"
  onPress={() => {
    // 获取根导航状态，找到Screen2对应的路由key
    const rootState = navigation.getRootState();
    const screen2Route = rootState.routes.find(r => r.name === 'Screen2');
    if (!screen2Route) return;
    // 分发修改参数的action，不会触发页面跳转
    navigation.dispatch(
      CommonActions.setParams({
        key: screen2Route.key,
        params: { item }
      })
    )
  }}
/>

4. 给Screen2的参数展示加兜底逻辑

function Screen2({ route }) {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <Text  style={styles.text}>{item || '暂未选择水果'}</Text>
    </View>
  );
}

方案2：使用React Context共享状态（更易维护，适合后续扩展需求） #

如果后续需要传递的参数更多、跨页面共享的场景更复杂，推荐用Context实现，不需要依赖导航器的API：

1. 全局创建共享Context

const SelectedFruitContext = React.createContext({
  selectedFruit: '',
  setSelectedFruit: () => {}
});

2. 在根组件用Provider包裹导航器，管理共享状态

export default function TabNavigator() {
  const [selectedFruit, setSelectedFruit] = React.useState('');
  return (
    <SelectedFruitContext.Provider value={{ selectedFruit, setSelectedFruit }}>
      <NavigationContainer>
        {/* 原有Tab导航代码保持不变 */}
      </NavigationContainer>
    </SelectedFruitContext.Provider>
  );
}

3. Screen1中点击按钮直接更新共享状态

function Screen1() {
  const { setSelectedFruit } = React.useContext(SelectedFruitContext);
  const renderItems = ({ item }) => {
    return (
      <View style={styles.item_container}>
        <Text style={styles.text}>{item}</Text>
        <Button 
          title="add"
          onPress={() => setSelectedFruit(item)}
        />
      </View>
    );
  };
  // 剩余代码保持不变
}

4. Screen2中读取共享状态展示

function Screen2() {
  const { selectedFruit } = React.useContext(SelectedFruitContext);
  return (
    <View style={styles.container}>
      <Text  style={styles.text}>{selectedFruit || '暂未选择水果'}</Text>
    </View>
  );
}

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