如何从Stack Navigator传递参数到Material Top Tab Navigator？

你遇到的问题是因为直接把参数传给了MaterialTopTab导航器本身，而非它内部的'Net banking'子页面，子页面无法直接读取父导航器的route参数。下面提供两种可行的解决方式：

方法一：直接导航到目标Tab页面并传参 #

React Navigation支持直接导航到嵌套导航结构里的具体屏幕，修改导航代码，指定目标Tab页面并传递参数：

// ComponentY（PaymentOption页面）中的导航代码
navigation.navigate('MaterialTopTab', {
  screen: 'Net banking',
  params: { body: data }
});

修改后，ComponentX就能直接通过route.params.body获取到传递的参数。

方法二：从Tab导航器传递参数到子页面 #

如果需要默认进入MaterialTopTab导航器时就给'Net banking'页面传参，可以在定义Tab导航器时，将导航器自身的route参数传递给子页面：

// MaterialTopTabs导航器的定义代码
const MaterialTopTabs = createMaterialTopTabNavigator();

function MaterialTopTabsNavigator({ route }) {
  return (
    <MaterialTopTabs.Navigator>
      <MaterialTopTabs.Screen
        name="Net banking"
        component={ComponentX}
        // 将Tab导航器的参数传递给子页面
        initialParams={{ body: route.params?.body }}
      />
      <MaterialTopTabs.Screen
        name="Cash Payment"
        component={ComponentZ}
      />
    </MaterialTopTabs.Navigator>
  );
}

这种情况下，你原来的导航代码navigation.navigate('MaterialTopTab', {body : data})可以继续使用，ComponentX同样能通过route.params.body拿到参数。

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