-React natif: FlatList se refs pour faire défiler

Question

Je suis en train de construire une application avec native réagir:

ceci est mon flatlist:

<FlatList 
     ref={"myFlatList"} 
     data={data} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
    /> 

Dans cette fonction, je veux faire défiler un index spécifique :

_enableTVEventHandler() { 
    this._tvEventHandler = new TVEventHandler(); 
    this._tvEventHandler.enable(this, function(cmp, evt) { 
     this.refs["myFlatList"].scrollToIndex({viewPosition: 0.5, index: 2}); 
    }.bind(this)); 
    } 

Mais j'ai une erreur: Impossible de lire la propriété 'scrollToIndex' undefined

Answer 1

Deux choses que je peux voir,

1. Vous devez refs définit pas dans les cordes. {} Cependant React docs vous suggèrent de faire usage de rappel ref

Est-ce que quelque chose comme

<FlatList 
     ref={(list) => this.myFlatList = list} 
     data={data} 
     keyExtractor={this._keyExtractor} 
     renderItem={this._renderItem} 
    /> 

1. Vous devez lier votre fonction pour pouvoir se référer à la bon contexte

le faire comme

_enableTVEventHandler =() => { 
    this._tvEventHandler = new TVEventHandler(); 
    this._tvEventHandler.enable(this, function(cmp, evt) { 
     this.myFlatList.scrollToIndex({viewPosition: 0.5, index: 2}); 
    }.bind(this)); 
    } 

ou

constructor(props) { 
    super(props) ; 
    this._enableTVEventHandler = this._enableTVEventHandler.bind(this); 
}