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（左侧抽屉菜单）的打开/关闭

如果我在HOME屏幕上创建一个Button并添加事件处理程序以切换抽屉，则它可以正常工作。但是仅当我从HomeHeader组件内部尝试此问题时，才会发生此问题。

顺便说一句，我正在使用ReactNavigation v5，并且我尝试使用此方法：https://reactnavigation.org/docs/connecting-navigation-prop/

到目前为止没有运气。

Answer 1

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

您可以在here

中了解更多信息

ReactNative无法从其他组件的功能体内更新组件

1 个答案: