如何使用标签导航器createMaterialBottomTabNavigator将参数传递到路由？

问题描述

我正在使用createMaterialBottomTabNavigator，并且想将参数传递给路由：

return (
   <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={home_customers} />
      <Tab.Screen name="Favorites" component={favorite_vendors} />
      <Tab.Screen name="More" component={settings_screen} />
   </Tab.Navigator>
);

我只能找到一个名为initialParams的属性，我不确定在这种情况下是否使用正确的属性。因此，我想做的是从上一个屏幕中 GET 参数，然后将该参数 PASS 分别输入到这三个屏幕中！

更新

好的，我发现了如何获取参数，但是我仍然不知道如何将这些参数传递给路由画面！

export default function home_customers_bar({ route,navigation }) {
    const current_city_ = route.params.current_user_city_; //here I get the parameter from the prevIoUs screen
    
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen name="Home" component={home_customers} />
            <Tab.Screen name="Favorites" component={favorite_vendors} />
            <Tab.Screen name="More" component={settings_screen} />
        </Tab.Navigator>
    );
}

解决方法

如果您只需要将数据传递到有限数量的屏幕，则可以像这样设置initialParams：

export default function home_customers_bar({route,navigation}) {
  const current_city_ = route.params.current_user_city_; //here I get the parameter from the previous screen

  return (
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen
        name="Home"
        component={home_customers}
        initialParams={{currentCity: current_city_}}
      />
      <Tab.Screen
        name="Favorites"
        component={favorite_vendors}
        initialParams={{currentCity: current_city_}}
      />
      <Tab.Screen name="More" component={settings_screen} />
    </Tab.Navigator>
  );
}

然后，您可以像这样在屏幕组件内检索参数：

function home_customers({ route }) {
  const currentCity = route.params.currentCity;

  // Do something with it...
}

---

如果要将这个值传递给许多不同的组件，那么最好使用诸如react context https://reactnavigation.org/docs/upgrading-from-4.x/#global-props-with-screenprops之类的东西。