React-native:FlatList get refs to scroll

时间:2017-05-12 11:15:41

标签: javascript reactjs react-native react-native-flatlist

我目前正在使用react native构建一个应用程序:

这是我的名单:

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

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

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

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

1 个答案:

答案 0 :(得分:3)

我可以看到两件事,

  1. 您无需在{}中定义字符串引用。但React文档建议您使用ref callback
  2. 做类似

    的事情
     <FlatList
          ref={(list) => this.myFlatList = list}
          data={data}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
    
    1. 您需要绑定您的函数才能引用正确的上下文
    2. 喜欢

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