Question

import React, { Component } from 'react';
import { AppRegistry, Alert, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  _onscroll() {
    this.flatList.scrollToEnd( { animated: false } )
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          ref={ (ref) => this.flatList = ref}
          onScrollBeginDrag={this._onscroll}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

为什么它会给出一个不确定的错误不是一个对象？滚动时，onscroll方法启动。此方法启动scrollToEnd。 ScrollToEnd方法就在这里。 https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend 如何正确编写代码？为什么它给出一个错误的unifined不是一个对象？滚动时，onscroll方法启动。此方法启动scrollToEnd。 ScrollToEnd方法就在这里。 https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend 如何正确编写代码？

Answer 1

您_onscroll方法未绑定，因此this处于错误的上下文中。这就是ref为undefined的原因。用你的构造函数绑定它：

constructor(props) {
    super(props);

    this._onscroll = this._onscroll.bind(this);
}

或将其转换为箭头函数，将其自动绑定到类的上下文：

_onscroll = () => {
    this.flatList.scrollToEnd( { animated: false } )
}

这是一个非常常见的错误。如果你发现自己犯了这个错误，你应该使用ES6语法和this。我打算将此标记为副本，但直接回答以解决您的问题。

为什么ref在FlatList组件中不起作用？

1 个答案: