如何在 React Native 中删除警告

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 Native 的新手，有人可以帮我解决这个警告吗？

代码

 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

快速解决方案

将您的组件定义移动到单独的代码行中

        component={props => (
          <PharmacyHome
            catId={this.props.navigation.state.params}
            {...props}
          />
        )}

反而

const YourComponent = props => (
  <PharmacyHome catId={this.props.navigation.state.params} {...props} />
);

      <Tab.Screen
        name="Home"
        component={YourComponent}

解释

组件使用引用标识来确定何时重新渲染......因此通过将组件定义作为道具传递，您将迫使它创建一个新对象作为具有每个渲染的组件......导致不必要的重新-渲染Tab.Screen，并且在渲染之间将保留无状态YourComponent

Answer 2

如果你需要传递一个非序列化的道具，如函数，那么你可以做这个，而不是：

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

Answer 3

其他答案可以完成这项工作，但是如果您的屏幕有很多组件，这些解决方案就会出现严重的性能问题，在我的例子中，我有一个 Flatlist，其元素在滚动时不断增加。

所以我想出了一个解决方案。您可以使用属性“children”来传递元素类型 jsx，而不是属性“component”。

我正在使用反应导航 5.x

<Tab.Screen
    name="Home"
    children={() => <PharmacyHome catId={this.props.navigation.state.params}/>}
    .
    .
    .
/>

与我尝试其他解决方案时得到的结果相比，这没有性能问题。