Mise à jour d'une ligne particulière de FlatList dans react-native

Question

J'utilise FlatList pour charger certains enregistrements. Au-dessus du FlatList j'ai un bouton et quand je tape sur ce bouton avec 11230 articles chargés dans le FlatList, la chose que je veux est de mettre à jour la couleur de fond de ligne particulière et l'image de l'article flatlist en utilisant onPress

import React, { Component } from 'react'; 
    import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    FlatList, 
    TouchableOpacity, 
    TextInput, 
    TouchableWithoutFeedback, 
    Image 
    } from 'react-native'; // Impoert required components 

    const GLOBAL_DATA = [];//To store json data 
    const PER_PAGE = 10; 
    const paginateArray = (array, pageSize, pageNumber) => { 
    const _pageNumber = pageNumber - 1; 
    return array.slice(_pageNumber * pageSize, (_pageNumber + 1) * pageSize); 
    }; 

    for (let i = 0; i <= 100000; i++) { 
    GLOBAL_DATA.push({ 
     key: i, 
     produto: { 
     descricao: 'Item number ' + i, 
     } 
    }); 
    } 

    export default class flatlistdemo extends Component { 
    constructor(props) { 
     super(props);   
     this.state = { 
     type: 'default', 
     data: [], 
     page: 1, 
     }; 
    } 

    componentDidMount() { 
     this.setState({ 
     data: paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page), 
     }); 
    } 

    getPagedOffers =() => { 
     this.setState((state) => ({ 
     data: state.data.concat(paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page)), 
     })); 
    } 

    handleLoadMore =() => { 
     this.setState({ 
     page: this.state.page + 1, 
     }, 
     () => { 
     this.getPagedOffers(); 
     } 
     ); 
    } 

    render() { 
     return (
     <View style={styles.container}> 
      <FlatList 
      data={this.state.data} 
      onEndReached={this.handleLoadMore} 
      onEndReachedThreshold={50} 
      getItemLayout={(data, index) => (
       {length: 40, offset: 40 * index, index} 
      )} 
      renderItem={this._renderItem} 
      />  
     </View> 
     ); 
    } 

    _renderItem = ({item}) => (
     <MyListItem 
     produto={item.produto} 
     /> 
    ); 
    } 

    class MyListItem extends React.PureComponent { 
     render() { 
     return (
      <View 
      style={{ 
       paddingVertical: 10, 
       backgroundColor:"#321AFE" 
      }}> 
      <TouchableOpacity onPress={() => this.updateRow(this.props.produto)}> 
       <Text 
       style={{ 
        color: '#000', 
        height: 40, 
        justifyContent: 'center' 
       }}> 
        {this.props.produto.descricao} 
       </Text> 
       <Image uri={{xyz}} 
      </TouchableOpacity> 
      </View> 
     ) 
     } 

     updateRow(item){ 
     //Here i want to update item of flatlist with new image and background color 
     } 
     } 
     //Styles used for page 
     const styles = StyleSheet.create({ 
      container: { 
      marginTop: 30, 
      alignItems: 'center', 
      }, 
     }); 

     AppRegistry.registerComponent('flatlistdemo',() => flatlistdemo); 

Comment puis-je mettre à jour la ligne flatlist en utilisant la fonctionnalité de cartographie et comment puis-je accéder à d'autres écrans en utilisant la navigation question auxquels fait face la navigation Impossible de lire la propriété « naviguer » undefined pour

this.props.navigation.navigate("Home", UserID); 

Answer 1

vous pouvez utiliser des accessoires sélectionnés de flatlist pour atteindre cette chose (peut être)

votre constructeur doit initialiser l'état vide pour une sélection

constructor(props){ 
    super(props) 
    this.state={ 
    slected:{} 
    } 
} 

votre rendu fonction devrait ressembler à ceci

render(){ 
    <FlatList 
       data={YOUR_DATA} 
       removeClippedSubviews={false} 
       keyExtractor={(item, index) => item.key} 
       renderItem={this.renderItem.bind(this)} 
       selected={this.state.selected} /> 
} 

votre fonction renderItem devrait ressembler à ceci

renderItem= ({ item, index }) =>{ 
    let {selected } = this.state; 
    let isSelected = !!selected[item.key]; // renderItem depends on state 


    return (
    <View> 
     {isSelected? 
     <Text>Yes, I am Selected row</Text>: 
     <Text>Please select me</Text>} 
    </View> 
    ); 
} 

votre fonction de mise à jour sélectionné

updateSelected =(isSingleSelected = false, rowsToUpdate = ARRAY OF ROWS NEED BE SELECTED)=>{ 
    if(isSingleSelected){ 
     let item = rowsToUpdate[0]; 
     this.setState((prevState)=>{ 
       let {prevSelected} = prevState; 
       return { 
        selected:{[item.key]:!prevSelected[item.key]} //just toggle the state of current item 
       } 
     } 
    }else{ 
     items = rowsToUpdate[0]; 
     this.setState((prevState)=>{ 
      let {prevSelected} = prevState; 
      let objUpdating={} 
      for(let i =0; i< items.length; i++){ 
       let item = items[i]; 
       objUpdating = {...objUpdating,[item.key]:!objUpdating[item.key]}  //using spread operator to avoid mutation you can try concat 
      } 
      return { 
       selected:{...prevSelected, ...objUpdating} //matching keys will be overwritten 
      } 
     } 
    } 
} 

Essayez et laissez-nous savoir si cela fonctionne pour vous

il peut être une meilleure solution, s'il vous plaît ajouter le vôtre parce que je suis également pour une meilleure mise en œuvre