我正在开发一个应用程序,我正在使用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.
我知道我做错了什么,但我不知道我的代码出了什么问题.我是新手,请有人帮我解决这个警告.
Code
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>
);