1

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

1 respuesta 1

0

Según documentación de React.

Las propiedades de un componente se pueden definir como los atributos de configuración para dicho componente. Son recibidos desde un nivel superior (normalmente al instanciar el componente) y por definición son inmutables, es decir, un componente no puede cambiar sus propias props

El estado

podríamos definirlo como una representación del componente en un punto en el tiempo, una instantánea del componente. El state de un componente se iniciará con un valor por defecto pero este valor si podrá mutar durante la vida del componente.

Si quieres tener un prop, debe tener un navigation={} cuando se instancia en el padre. Si deseas usarlo simplemente en el componente como parte de este, puedes crear el objeto en el estado de tu componente HeaderBar.

1
  • Y para eso, tengo que crear un constructor en mi clase, y decirle que el this.state es igual a navigation o algo parecido ?
    – Marc
    Commented el 18 nov. 2020 a las 11:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.