React-native:FlatList 获取 refs 以滚动 [英] React-native: FlatList get refs to scroll

问题描述

我目前正在使用 React Native 构建应用程序:

I'm currently building an app with react native:

这是我的平面清单:

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

在这个函数中，我想滚动到一个特定的索引:

In this function I want to scroll to a specific index:

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

但是我有一个错误:无法读取未定义的属性scrollToIndex"

But I have an error: Cannot read property 'scrollToIndex' of undefined

推荐答案

我能看到的两件事，

1. 您无需在 {} 中定义字符串引用.但是 React 文档建议您使用 ref 回调

1. You need not define string refs within {}. However React docs suggest you to make use of ref callback

做类似的事情

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

1. 您需要绑定您的函数才能引用正确的上下文

喜欢就好

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

或

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

这篇关于React-native:FlatList 获取 refs 以滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！