기본 반응에서 경고를 제거하는 방법

기본 반응에서 경고를 제거하는 방법

나는 앱 작업을 하고 있고 사용하고 있다.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.

내가 뭘 잘못하고 있다는 건 알지만 내 코드가 왜 잘못됐는지 알아내지 못했어.나는 원래부터 리액션에 익숙하지 않은데, 이 경고를 어떻게 해결할 수 있는지 누가 좀 도와주겠니?

코드

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

퀵 솔루션

구성 요소 정의를 별도의 코드 행으로 이동

        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, 그리고 no-state 는 렌더사이에 보존될 것이다.YourComponent

함수와 같이 직렬화할 수 없는 소품을 전달해야 하는 경우 대신 다음을 수행하십시오.

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

소품 대신 파람을 통해 원하는 것을 전달해 일을 성사시켰다.당신에게는 이렇게 보일 것이다.

<Tab.Screen
    name="Home"
    component={PharmacyHome}
    initialParams={{ catId: this.props.navigation.state.params }}
/>

이게 도움이 되길 바래.

다른 답변은 작업을 수행하지만 화면에 많은 구성 요소가 있는 경우 이 솔루션에는 심각한 성능 문제가 있으며, 내 경우 스크롤에 대한 요소가 증가된 플랫리스트가 있었다.

그래서 해결책을 찾아냈다.속성 'children'을 사용하여 속성 'component' 대신 요소 유형 jsx를 통과할 수 있다.

리액트 네비게이션 5.x를 사용하고 있다.

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

이것은 내가 다른 솔루션을 시도할 때 얻었던 것과 비교했을 때 성능 문제가 없었다.

이 작업은 문서화에서 다음과 같이 수행되었다.

구성 요소 프로펠러를 지정하는 대신 화면에 렌더 콜백을 사용하십시오.

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

https://reactnavigation.org/docs/hello-react-navigation/#the-filename-filename을 참조하십시오.

참조URL: https://stackoverflow.com/questions/60586470/how-to-remove-warning-in-react-native