Aktualisiere bestimmte Zeile von FlatList in reaktivem nativen

Question

Ich verwende FlatList, um einige Datensätze zu laden. Oberhalb der FlatList habe ich einen Knopf, und wenn ich diesen Knopf mit 11230 Artikel tippen im FlatList geladen wird, ist das, was ich will bestimmte Zeile Hintergrundfarbe und Bild von flatlist Artikel zu aktualisieren, indem onPress mit

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); 

Wie kann ich flatlist Zeile aktualisieren, indem Sie Mapping-Funktionalität und auch, wie kann ich zu anderen Bildschirmen navigieren Navigation mit Derzeit auf Navigation lesen kann nicht Eigentum konfrontiert Problem ‚navigieren‘ undefinierten für

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

Answer 1

Sie Requisiten von flatlist ausgewählt verwenden können, zu erreichen dieses Ding (kann sein)

Konstruktor sollte für ausgewählte

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

leeren Zustand initialisieren Ihre Funktion wie diese ähnliche

aussehen machen sollte

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

Ihre renderItem Funktion

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> 
    ); 
} 

Ihre Funktion aussehen sollte aktualisieren ausgewählt

die Sie interessieren und lassen Sie uns wissen, ob dies für Arbeiten Sie

kann es bessere Lösung sein, Ihr bitte hinzufügen, weil ich auch für eine bessere Umsetzung der Suche bin