如何在React Native中删除警告 [英] How to remove warning in React native

问题描述

我正在开发一个应用程序，并且正在使用 bottomTabNavigator ，但与此同时，我收到此警告！(好像您正在为屏幕'Feed'传递'Component'道具的内联函数(例如component = {()=>< SomeComponent/>))).传递内联函数将导致组件状态在重新渲染时丢失，并由于重新创建每个渲染而导致性能问题.您可以将功能作为子级传递给屏幕"，以实现所需的行为.

I am working on an app and I am using bottomTabNavigator but in mean time I am getting this warning! ( 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的新手，有人可以帮助我如何解决此警告.

I know I am doing something wrong but I didn't figure out what's wrong with my code. I am new to React native, could someone please help me how to solve this warning .

代码

 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>
    );

推荐答案

快速解决方案

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

Move your component definition into a separate line of code

        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}

说明

组件使用引用身份来确定何时重新呈现...因此，通过将组件定义作为道具传递，您将强制其创建一个新对象作为组件，每个组件-render ...导致 Tab.Screen 不必要的重新渲染，并且 YourComponent

Components use reference identity to determine when to re-renders ... so by passing component-definition as a prop, you're forcing it to create a new-object as a component with each-render ... causing unnecessary-re-renders for Tab.Screen, and no-state will be preserved between renders for YourComponent

这篇关于如何在React Native中删除警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！