es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo navego desde los resultados de búsqueda de Algolia a una página específica?

¿Cómo puedo navegar hacia los resultados de búsqueda mostrados por Algolia?

¿Tengo que darle a cada elemento (en este caso 15 artículos diferentes) una clave diferente?

Solo puedo entender cómo hacer que navegue hacia un artículo específico, y no hacia un artículo basado en el resultado de búsqueda que se haya hecho clic.

import React from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import { connectInfiniteHits } from 'react-instantsearch-native';
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';

const InfiniteHits = ({ hits, hasMore, refineNext, }) => {

  const navigation = useNavigation()

 return(
    <view style="{styles.container}">
      <flatlist data="{hits}" numcolumns="{2}" keyextractor="{item" ==""> item.objectID}
        onEndReached={() => hasMore && refineNext()}
        renderItem={({ item }, index) => (
            <touchableopacity onpress="{()" ==""> navigation.navigate('Artículos',{item})}
            style={styles.item}>
              <view style="{TextBoxes.scrollcontainer}">
              <view style="{TextBoxes.boxes}" key="{index}">
                <text key="{index}" style="{TextBoxes.style}" hit="{item}">
                  {item.title}
                </text>
              </view>
            </view>
            </touchableopacity>
          )}
      />
    </flatlist></view>
  )
};

InfiniteHits.propTypes = {
  hits: PropTypes.arrayOf(PropTypes.object).isRequired,
  hasMore: PropTypes.bool.isRequired,
  refineNext: PropTypes.func.isRequired,
};


export default connectInfiniteHits(InfiniteHits);
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para navegar a los resultados de búsqueda mostrados por Algolia, puedes utilizar el gancho useNavigation del paquete @react-navigation/native y pasar el resultado de la búsqueda como una propiedad a la pantalla objetivo utilizando el método navigation.navigate.

    En el fragmento de código proporcionado, el método onPress en el componente TouchableOpacity es responsable de navegar a la pantalla objetivo. El objeto item (que contiene los detalles del resultado de búsqueda específico en el que se hizo clic) se pasa como una propiedad a la pantalla objetivo utilizando el método navigation.navigate:

    onPress={() => navigation.navigate('Articles', {item})}
    

    En cuanto a la pregunta sobre dar a cada elemento una clave diferente, no es necesario dar a cada elemento una clave diferente en este caso, ya que la propiedad keyExtractor ya se está utilizando para extraer el objectID de cada elemento como clave. Este es un identificador único para cada elemento y se recomienda utilizarlo como clave en lugar del índice del arreglo.

Comments are closed.