Resalte un elemento seleccionado en React-Native FlatList

Esta división fue evaluado por nuestros expertos para que tengas la seguridad de la exactitud de este ensayo.

Solución:

Puedes hacer algo como:

1. Para renderItem, use algo como TouchableOpacity con un evento onPress pasando el índice o id del renderingItem;

2. Función para agregar el elemento seleccionado a un estado:

   handleSelection = (id) => 
      var selectedId = this.state.selectedId
   
      if(selectedId === id)
        this.setState(selectedItem: null)
      else 
        this.setState(selectedItem: id)
   
   
   handleSelectionMultiple = (id) => 
      var selectedIds = [...this.state.selectedIds] // clone state
   
      if(selectedIds.includes(id))
        selectedIds = selectedIds.filter(_id => _id !== id)
      else 
        selectedIds.push(id)
   
      this.setState(selectedIds)
   
   

3. Lista plana:

    
         this.handleSelection(item.id)
          style=item.id === this.state.selectedId ? styles.selected : null 
   
          // for multiple items
          onPress=() => this.handleSelectionMultiple(item.id)
          style=this.state.selectedIds.includes(item.id) ? styles.selected : null 
        >
           item.name
        
     
   

   />

4. ¡Haz un estilo para el elemento seleccionado y listo!

En lugar de this.state.selectedItem y ajuste con/comprobación de un rowItem.id.valuerecomendaría usar un objeto Mapa con key:pares de valores como se muestra en el ejemplo de documentos de RN FlatList: https://facebook.github.io/react-native/docs/flatlist.html. Eche un vistazo a los documentos de js Map también: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map.

La propiedad extraData recomendada por @ jI-V garantizará que se vuelva a renderizar cuando this.state.selected cambie en la selección.

Su onPressAction obviamente cambiará un poco del ejemplo a continuación dependiendo de si desea limitar la cantidad de selecciones en un momento dado o no permitir que el usuario alterne la selección, etc.

Además, aunque no es necesario de ninguna manera, me gusta usar otra clase o componente puro para el renderItem componente; termina luciendo algo como lo siguiente:

export default class BasicFlatList extends Component 
  state = 
    otherStateStuff: ...,
    selected: (new Map(): Map) //iterable object with string:boolean key:value pairs
  

  onPressAction = (key: string) => 
    this.setState((state) => 
      //create new Map object, maintaining state immutability
      const selected = new Map(state.selected);
      //remove key if selected, add key if not selected
      this.state.selected.has(key) ? selected.delete(key, !selected.get(key)) : selected.set(key, !selected.get(key));
      return selected;
    );
  

  renderRow = (item) => 
    return (
        
    );
  

  render() 
    return(
       (
          this.renderRow(item)
        )
        extraData=this.state
      />
    );
  



class RowItem extends Component 
  render()
    //render styles and components conditionally using this.props.selected ? _ : _
    
    return (
      
        ...
      
    )
  

Debe pasar una propiedad extraData a su FlatList para que vuelva a representar sus elementos en función de su selección

Aquí :

 (
      this.renderRow(item)
    )
 />

Fuente: https://facebook.github.io/react-native/docs/flatlist

Asegúrese de que todo de lo que depende su función renderItem se pase como un accesorio (por ejemplo, extraData) que no es === después de las actualizaciones; de lo contrario, es posible que su interfaz de usuario no se actualice con los cambios.

Tienes la opción de amparar nuestra tarea añadiendo un comentario y valorándolo te damos las gracias.

---

---

Utiliza Nuestro Buscador