Reactネイティブで警告を削除する方法

Question

私はアプリに取り組んでいて、bottomTabNavigatorを使用していますが、その間にこの警告を受けています！ ( Look like you're passing an inline function for 'Component' prop for the screen 'Feed' (e.g component={()=><SomeComponent/>)). Passing an inline function will cause the component state to be lost on re-render and cause perf issue since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

私は何か間違っていることを知っていますが、自分のコードの何が悪いのかわかりませんでした。私はReactネイティブです。初めてです。この警告の解決方法を教えてください。

コード

 return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeTintColor: "#e91e63"
          }}
        >
          <Tab.Screen
            name="Home"
            component={props => (
              <PharmacyHome
                catId={this.props.navigation.state.params}
                {...props}
              />
            )}
            options={{
              tabBarLabel: "Home",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="home" color={color} size={size} />
              )
            }}
          />
          <Tab.Screen
            name="Notifications"
            component={Notifications}
            options={{
              tabBarLabel: "Updates",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="bell" color={color} size={size} />
              )
            }}
          />
          <Tab.Screen
            name="Profile"
            component={Profile}
            options={{
              tabBarLabel: "Profile",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons
                  name="account"
                  color={color}
                  size={size}
                />
              )
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );

Answer 1

関数など、シリアル化できないプロパティを渡す必要がある場合は、代わりに this を実行できます。

<Stack.Screen name="Home">
  {props => <PharmacyHome catId={this.props.navigation.state.params} {...props} />
</Stack.Screen>