os muestro mi código, es un tsx:
import React, {Component} from 'react';
import {Image, Text, View} from 'react-native'
import {stylesHeaderBar} from './StylesHeaderBar';
import { Icon } from 'react-native-elements'
interface Props {
navigation: any
}
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> Hola </Text>
</View>
</View>
)
}
}
export default HeaderBar
Al llamar al componente 'HeaderBar' desde App.js me salta una advertencia que dice:
TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): HeaderBar', gave the following error. Property 'navigation' is missing in type '{}' but required in type 'Readonly'. Overload 2 of 2, '(props: Props, context: any): HeaderBar', gave the following error. Property 'navigation' is missing in type '{}' but required in type 'Readonly'.
Mi App.tsx:
import React, {Component} from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import MainScreen from './components/MainScreen/MainScreen';
import HistorialScreen from './components/HistorialScreen/HistorialScreen';
import HeaderBar from './components/HeaderBar/HeaderBar';
import {View} from 'react-native';
const Drawer = createDrawerNavigator();
class App extends Component {
render() {
return (
<View style={{flex: 1}}>
<HeaderBar/>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name='Pedidos' component={MainScreen}/>
<Drawer.Screen name='Historial' component={HistorialScreen}/>
</Drawer.Navigator>
</NavigationContainer>
</View>
)
}
}
export default App;
Sé que es algo con las props del componente, pero no entiendo nada más, me gustaría que me explicarais como puedo usar las props en un componente sin tener que indicarla desde la clase padre, porque el IDE me dice que escriba esto: <HeaderBar navigation={} />
Soy nuevo en React y no tengo mucha idea, gracias por vuestro tiempo