React Native：如何从Drawer Navigator向Tab Navigator传参至HomePage组件

你的传参思路是可行的，但需要注意两个关键细节：修正Drawer里的点击事件写法，以及在HomePage中正确获取参数，下面一步步来解决：

1. 先修复DrawerContainer里的 onPress 错误 #

你当前的onPress写法会导致组件一渲染就直接触发跳转，而不是点击时才触发，这是个常见的小问题，需要用箭头函数包裹navigate调用：

// 错误写法（会立即执行navigate）
<TouchableHighlight style={styles.TouchableHighlight} onPress={this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})}>

// 正确写法
<TouchableHighlight style={styles.TouchableHighlight} onPress={() => this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})}>

2. 在HomePage组件中获取参数 #

因为你把参数传给了Tab Navigator（TabsNav），而HomePage是它的子屏幕，你可以通过以下方式获取参数：

类组件（你的Home组件如果是类的话） #

class Home extends React.Component {
  render() {
    // 方式1：使用getParam，支持设置默认值（兼容React Navigation旧版本）
    const testParam = this.props.navigation.getParam('testParam', '默认值');
    
    // 方式2：直接访问route.params（React Navigation 5+推荐）
    const testParam = this.props.route.params?.testParam;
    
    return (
      <View>
        <Text>传递的参数是：{testParam}</Text>
      </View>
    );
  }
}

函数组件 #

如果Home是函数组件，用useRoute钩子：

import { useRoute } from '@react-navigation/native';

function Home() {
  const route = useRoute();
  const testParam = route.params?.testParam;

  return (
    <View>
      <Text>传递的参数是：{testParam}</Text>
    </View>
  );
}

补充说明 #

这种通过父导航（Drawer）跳转到Tab导航并传参的方式是完全合法的，参数会被存在Tab导航的路由参数中，它的子屏幕可以通过导航上下文访问到这些参数。如果后续需要给Tab导航的多个子屏幕传递参数，也可以在Tab Navigator的screenOptions里统一处理，但你的场景下直接按上面的方式获取就足够了。

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