如何在 React Native 中删除警告

Posted 2023-02-22

【中文标题】如何在 React Native 中删除警告

【英文标题】：How to remove warning in 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/…

【参考方案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/>
    .
    .
    .
/>

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