为何ref在FlatList组件中无法生效？

嘿，我一眼就瞅出问题啦——你的FlatList ref没法正常工作，核心原因是你压根没给FlatList组件绑定ref属性，所以this.flatList根本找不到对应的组件实例，调用scrollToEnd自然会报错~ 另外还有几个小细节需要调整，我给你一步步拆解修复：

问题根源拆解 #

• 你的代码里，<FlatList>标签完全没加ref相关配置，导致this.flatList是undefined，调用它的方法肯定失效。
• 类组件中的普通方法（比如你的_onscroll）默认没有绑定this，调用时this会指向undefined，就算加了ref也拿不到组件实例。
• 原代码还漏掉了FlatList必备的renderItem属性，这会导致列表根本无法渲染内容。

修复后的完整代码 #

import React, { Component } from 'react';
import { AppRegistry, Alert, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  constructor(props) {
    super(props);
    // 给_onscroll方法绑定this，避免调用时this指向异常
    this._onscroll = this._onscroll.bind(this);
    // 方式1：用React.createRef()创建ref（React 16.3+推荐）
    // this.flatListRef = React.createRef();
  }

  _onscroll() {
    // 如果用createRef，这里要改成 this.flatListRef.current.scrollToEnd(...)
    this.flatList.scrollToEnd({ animated: false });
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          // 方式2：用回调ref绑定到this.flatList（传统写法，兼容所有版本）
          ref={(ref) => this.flatList = ref}
          // 如果用createRef，这里替换成 ref={this.flatListRef}
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'Jacob'}
          ]}
          // 必须添加的renderItem，负责渲染列表项
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
          // 绑定滚动事件，触发我们的滚动处理方法
          onScroll={this._onscroll}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

AppRegistry.registerComponent('FlatListBasics', () => FlatListBasics);

额外注意事项 #

• 推荐使用React.createRef()的方式定义ref，写法更规范，也更容易维护。
• onScroll事件会频繁触发，如果只是想在特定时机（比如数据更新后）滚动到末尾，建议给方法加节流处理，避免性能浪费。
• 确保FlatList的data数组格式正确，每个项都要有唯一的key属性（你原代码最后一项没写完，我帮你补全了）。

内容的提问来源于stack exchange，提问作者sinevik