如何使用选项卡导航器（createMaterialBottomTabNavigator）将参数传递给路由？

Question

我正在使用 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>
    );
}

Answer 1

如果您只需要将数据传递给有限数量的屏幕，您可以这样设置 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...
}

---

如果你要将这个值传递给很多不同的组件，那么最好使用像反应上下文这样的东西 https://reactnavigation.org/docs/upgrading-from-4.x/#global-props-with-screenprops.

Answer 2

更简单的方法是使用 React Context API。

我也非常努力地使用 react-native 中的底部选项卡将数据和状态从一个屏幕传递到另一个屏幕，但这只是一项繁重的任务并且一直存在故障。你可能想克隆这个存储库并研究它。它有不同的屏幕，所以我不能在这里写代码，但它很有帮助，而且更简单。

https://github.com/AnatuGreen/ReactNative-ContextAPI-Sample-App