ReactNative 无法从 > 不同组件的函数体内更新组件答案

【问题标题】：ReactNative Cannot update a component from inside the function body of a > different componentReactNative 无法从 > 不同组件的函数体内更新组件
【发布时间】：2020-11-06 08:14:32
【问题描述】：

我的 HomeHeader 组件是这样的：

import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";

export default function HomeHeader({ navigation }) {
  return (
    <View style={styles.home_header}>
      <Icon
        style={styles.menu}
        name="bars"
        size={30}
        color="white"
        onPress={navigation.toggleDrawer()}
      />

      <Image
        style={styles.header_logo}
        source={require("../assets/logo.png")}
      />
      <Text>Hello</Text>
    </View>
  );
}

我在我的 Home 屏幕中使用它，如下所示：

return (
  <View>
    <HomeHeader navigation={navigation} />
  </View>
)

但我收到此错误消息：

警告：无法从函数体内部更新组件不同的组件。

我想要做的是，我已将主屏幕的标题部分分离到一个名为 HomeHeader 的单独组件中。在这个组件中，我附加了事件处理程序来切换 DrawerNavigation 的打开/关闭（左侧抽屉菜单）

如果我在主屏幕中创建一个按钮并添加事件处理程序来切换抽屉，它可以正常工作。但只有当我在 HomeHeader 组件中尝试此操作时才会出现此问题。

顺便说一句，我正在使用 ReactNavigation v5，我什至尝试过这种方法：https://reactnavigation.org/docs/connecting-navigation-prop/

到目前为止没有运气。

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

将onPress={ navigation.toggleDrawer() } 更改为 onPress={ ()=> navigation.toggleDrawer() }

您可以在here阅读更多相关信息

【讨论】：

非常感谢。