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

Question

我的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>
  );
}

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

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

但我收到此错误消息：

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

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

如果我在主屏幕中创建一个 Button 并添加事件处理程序来切换抽屉，它工作正常。但是只有当我从我的 HomeHeader 组件内部尝试这个问题时才会发生。

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

到目前为止没有运气。

Answer 1

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

您可以在此处阅读有关此内容的更多信息