【问题标题】:React-native: FlatList get refs to scrollReact-native:FlatList 获取要滚动的引用
【发布时间】:2017-10-11 16:48:06
【问题描述】:

我目前正在使用 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”

【问题讨论】:

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


    【解决方案1】:

    我能看到的两件事,

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

    做一些类似的事情

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

    【讨论】:

    • 感谢您的回答,我试过了,但我有同样的错误
    • 你的内部函数有一个绑定,但是外部的呢,即_enableTVEventHandler
    • 我的函数在这里被调用:componentDidMount() { this._enableTVEventHandler(); }
    • 需要绑定吗?
    • 是的,你需要绑定那个
    猜你喜欢
    • 1970-01-01
    • 2019-09-25
    • 1970-01-01
    • 1970-01-01
    • 2021-01-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-15
    相关资源
    最近更新 更多