typescript - 如何在类组件中使用 this.props.navigation.openDrawer() 而无需从父级传递道具给它？

Question

我有这个组件：

class HeaderBar extends Component<Props> {
    render() {
        return (
            <View style={stylesHeaderBar.header}>
                <View style={stylesHeaderBar.menuIconContainer}>
                    <Icon name='menu' onPress={() => this.props.navigation.openDrawer()} />
                </View>
                <View style={stylesHeaderBar.titleAndLogoContainer}>
                    <Image style={stylesHeaderBar.image} source={require('../../assets/icon.png')} />
                    <Text> Restaurantes </Text>
                </View>
            </View>
        )
    }
}

我想从我的主文件中调用它，如下所示：

<HeaderBar/>

但他强迫我这样通过他：

<HeaderBar navigation={}> </HeaderBar>

我是 React 的新手，我不太了解它是如何工作的，我该如何解决？我正在使用打字稿。

这是我的 App.tsx：

class App extends Component {

    render() {
        return (
           <View style={{flex: 1}}>
               <HeaderBar navigation={this.props}></HeaderBar>
                <NavigationContainer>
                    <Drawer.Navigator>
                        <Drawer.Screen name='Pedidos' component={MainScreen}/>
                        <Drawer.Screen name='Historial' component={HistorialScreen}/>
                    </Drawer.Navigator>
                </NavigationContainer>
            </View>
        )
    }
}

标签： typescriptreact-native