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.

No se pueden mostrar títulos de Algolia en React Native.

22 Jul, 2023 Programación

No puedo mostrar los títulos en las tarjetas. La barra de búsqueda funciona como se esperaba, pero cada tarjeta debería tener un título en la parte superior.

En mi índice de búsqueda de Algolia, cada objeto tiene un atributo único ‘title’ que he creado. Cuando uso la documentación (del sitio de Algolia), los títulos se muestran bien, pero no quiero el atributo de resaltado, así que eso es lo que estoy tratando de eliminar.

import React from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import { connectInfiniteHits } from 'react-instantsearch-native';



const InfiniteHits = ({ hits, hasMore, refineNext }) => {
  return(
    
       item.objectID}
        onEndReached={() => hasMore && refineNext()}
        renderItem={({ item }, index) => (
          
            
              
                
                  
              
            
          
        )}
      />
    
  )
};


export default connectInfiniteHits(InfiniteHits);

¿Alguien puede indicarme en la dirección correcta, hacia donde está mi problema?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el código proporcionado, parece que el problema está en la representación del título en las tarjetas. En la función renderItem del FlatList, hay un elemento Text con una prop style que hace referencia a un objeto TextBoxes.style. Parece que este objeto style debería contener una propiedad para mostrar el atributo de título del objeto item.

    Una solución podría ser modificar el objeto TextBoxes.style para incluir una propiedad textAlign: center que centre el título, y una propiedad fontSize y fontWeight para ajustar el tamaño y el peso del título. Además, dentro del elemento Text, el atributo de título debería mostrarse usando item.title.

    Aquí tienes un ejemplo de cómo podría verse el código modificado:

    import React from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import { connectInfiniteHits } from 'react-instantsearch-native';

const TextBoxes = {
  style: {
    textAlign: 'center',
    fontSize: 20,
    fontWeight: 'bold',
  },
  boxes: {
    marginBottom: 10,
  },
  scrollcontainer: {
    backgroundColor: 'white',
    borderRadius: 10,
    margin: 5,
    elevation: 5,
    shadowOffset: { width: 5, height: 5 },
    shadowColor: 'grey',
    shadowOpacity: 0.5,
    padding: 10,
  },
};

const InfiniteHits = ({ hits, hasMore, refineNext }) => {
  return (
    <view style="{styles.container}">
      <flatlist data="{hits}" numcolumns="{2}" keyextractor="{(item)" ==""> item.objectID}
        onEndReached={() => hasMore && refineNext()}
        renderItem={({ item }, index) => (
          <view style="{styles.item}">
            <view style="{TextBoxes.scrollcontainer}">
              <view style="{TextBoxes.boxes}" key="{index}">
                <text style="{TextBoxes.style}">{item.title}</text>
              </view>
            </view>
          </view>
        )}
      />
    </flatlist></view>
  );
};

export default connectInfiniteHits(InfiniteHits);

    Esto mostrará el atributo de título de cada objeto item en el centro de cada tarjeta.

Comments are closed.