2

Estaba desarrollando una App en React Native, que tratará de conectar con una API y devolver los datos para pintarlos en pantalla.

El tema es que tengo un error al llamar al useNavigation(), que bajo mi desconocimiento tiene pinta de tratarse por un mal uso del mismo.

El error es el siguiente:

Coudn't find a navigation object. Is your component inside a screen in a navigator?`

El código del archivo donde cargo el componente es el siguiente:

HomeScreen.tsx

import React, {useEffect} from 'react';
import {View, ActivityIndicator, FlatList, Text} from 'react-native';
import {useNews} from '../hooks/useNews';
import {HomeComponent} from '../components/HomeComponent';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/native';

//TODO: Mostrar las noticias ordenadas por fecha,:
const data = useNews();
const navigation = useNavigation();
//const dataSort = data.sort((a, b) => new Date(a.fechas).getTime() > new Date(b.fechas).getTime(),);

export const HomeScreen = () => {
  //const {isLoading, title, description, url,
  //urlToImage} = useNews();
  const {isLoading} = useNews();

  useEffect(() => {
    isLoading == false;
  }, [useNews]);

  if (isLoading) {
    return (
      <View>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }

  return (
    <View>
      <FlatList
        data={data as unknown as readonly []}
        keyExtractor={(_item, index) => '' + index}
        renderItem={() => (
          <TouchableWithoutFeedback
            onPress={() => navigation.navigate('DetailScreen', data)}>
            <HomeComponent />
          </TouchableWithoutFeedback>
        )}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        style={{marginTop: 10, height: 70}}
      />
    </View>
  );
};

y el código del componente como tal es el siguiente:

HomeComponent.tsx:

import React, {useEffect, useState} from 'react';
import {Image, Text, View, ActivityIndicator, StyleSheet} from 'react-native';
import {useNews} from '../hooks/useNews';

const {title, description, urlToImage, isLoading} = useNews();
//const navigation = useNavigation();
export const HomeComponent = () => {
  const uri = `https://image.tmdb.org/t/p/w500${urlToImage}`;

  useEffect(() => {
    isLoading == false;
  }, [title, description, urlToImage, isLoading]);

  if (isLoading) {
    return (
      <View>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }
  //TODO: Hacer un map para recoger el mismo indice, que corresponda a cada noticia.
  return (
    <View>
      <Text>Titulo: {title}</Text>
      <Text>Descripcion: {description.substring(0, 20)}</Text>
      <Image source={{uri}} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    borderRadius: 18,
  },
});

Como digo se trata evidentemente de un con el uso del useNavigation, debido principalmente a que llevo unos meses desarrollando en ReactNative.

Espero puedan ayuda y si es asi muchas gracias de ante mano!

1 respuesta 1

2

Debes agregar los hooks dentro del scope del componente como se indica en la documentación: Reglas de Hooks

En su caso quedaría de esta forma:

HomeScreen.tsx

import React, {useEffect} from 'react';
import {View, ActivityIndicator, FlatList, Text} from 'react-native';
import {useNews} from '../hooks/useNews';
import {HomeComponent} from '../components/HomeComponent';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/native';


export const HomeScreen = () => {
  //TODO: Mostrar las noticias ordenadas por fecha,:
  const data = useNews();
  const navigation = useNavigation();

  const {isLoading} = useNews();

  useEffect(() => {
    isLoading == false;
  }, [useNews]);

  if (isLoading) {
    return (
      <View>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }

  return (
    <View>
      <FlatList
        data={data as unknown as readonly []}
        keyExtractor={(_item, index) => '' + index}
        renderItem={() => (
          <TouchableWithoutFeedback
            onPress={() => navigation.navigate('DetailScreen', data)}>
            <HomeComponent />
          </TouchableWithoutFeedback>
        )}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        style={{marginTop: 10, height: 70}}
      />
    </View>
  );
};

HomeComponent.tsx:

import React, {useEffect, useState} from 'react';
import {Image, Text, View, ActivityIndicator, StyleSheet} from 'react-native';
import {useNews} from '../hooks/useNews';

export const HomeComponent = () => {
  const {title, description, urlToImage, isLoading} = useNews();
  const uri = `https://image.tmdb.org/t/p/w500${urlToImage}`;

  useEffect(() => {
    isLoading == false;
  }, [title, description, urlToImage, isLoading]);

  if (isLoading) {
    return (
      <View>
        <ActivityIndicator color="red" size={100} />
      </View>
    );
  }
  //TODO: Hacer un map para recoger el mismo indice, que corresponda a cada noticia.
  return (
    <View>
      <Text>Titulo: {title}</Text>
      <Text>Descripcion: {description.substring(0, 20)}</Text>
      <Image source={{uri}} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  image: {
    borderRadius: 18,
  },
});

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.