如何在 React Native 中删除警告答案

【问题标题】：How to remove warning in React native如何在 React Native 中删除警告
【发布时间】：2020-06-20 12:16:45
【问题描述】：

我正在开发一个应用程序，我正在使用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>
    );

【问题讨论】：

对于从谷歌搜索访问此页面的任何其他人：如果您将屏幕命名为“组件”，即使在其自己的源文件中，也会出现错误消息，例如：“ const component = (props) => { .. }; 导出默认组件; ".这是因为 react-navigation 代码实际上会检查组件的名称是否为“组件”。见这里：github.com/react-navigation/react-navigation/blob/master/…

标签： javascript reactjs react-native ecmascript-6

【解决方案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}

说明

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

【讨论】：

不知道有什么区别，谁能解释一下？

【解决方案2】：

我通过 params 而不是 props 传递我想要的东西来实现它。对你来说，它看起来像这样：

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

希望对你有帮助

【讨论】：

如果您尝试将可序列化的值作为参数传递，这将引发警告。请参阅my answer 了解替代方案。

【解决方案3】：

如果你需要传递一个不可序列化的props，比如一个函数，那么你可以改为this：

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

【讨论】：

这是完美的答案

【解决方案4】：

这对我有用，来自文档：

对屏幕使用渲染回调而不是指定组件属性：

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

见https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props

【讨论】：

【解决方案5】：

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

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

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

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

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

【讨论】：