如何使用 React Navigation 将道具传递给个人 <Tab.Screen>？

Question

我使用 @react-navigation/bottom-tabs 在我的 React Native 应用程序中有以下堆栈导航器代码：

const Tab = createBottomTabNavigator();

const TabNavigator = () => (
  <Tab.Navigator tabBar={(props) => <BottomNavBar {...props} />}>
    <Tab.Screen name={routes.app.search} component={Search} />
    <Tab.Screen name={routes.app.connections} component={Connections} />
    <Tab.Screen name={routes.app.filters} component={Filters} />
    <Tab.Screen name={routes.app.profile} component={Profile} />
  </Tab.Navigator>
);

如何将道具传递到此导航器中的单个屏幕？例如，Search 屏幕?

Answer 1

组件属性将一个 React 组件作为要在该屏幕上显示的值，并将 props 传递给该组件，而不是直接调用屏幕，您可以将箭头函数作为包装器传递到该组件并在箭头函数 return 中调用要显示的 React 组件，现在您可以在 returning 之前传递 props 甚至实现一些逻辑！所以让我们试试这个

<Tab.Screen name={routes.app.search} component={() => <Search showProps={true} {...props} />} />

如何使用 React Navigation 将道具传递给个人 <Tab.Screen>？

How can I pass props to individual <Tab.Screen> with React Navigation?

reactjs

react-native

react-navigation

react-navigation-bottom-tab