React-Native：FlatList滚动到索引显示错误未定义

Question

我想实现水平FlatList的按钮（上一个/下一个）动作上的索引滚动。 所以我在平面列表中添加了ref，但它给出了错误

代码：

import React, { Component } from "react";
import {
  View,
  Text,
  FlatList,
  Dimensions,
  Button,
  TouchableOpacity
} from "react-native";

const { height, width } = Dimensions.get("window");


class AnswerView extends Component {
  render() {
    return (
      <View style={{
          width: width/2,
          height: 60,
          backgroundColor: "#ffffff",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "stretch"
      }}>
        <View style={{
              flex: 1,
              backgroundColor: "#ffffff",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              borderWidth: 1,
              borderColor: "#00E2B2",
              borderRadius: 4,
              marginLeft: (this.props.index % 2 != 0) ? 8 : 16,
              marginRight: (this.props.index % 2 == 0) ? 8 : 16,
              marginTop: 14
          }}>
          <Text> Index: {this.props.index}  &  Item: {this.props.item} </Text>
        </View>
      </View>
    )
  }
}

class AssessmentListItem extends Component {

  constructor(props) {
    super(props);
    this.state = {
      answers: [1, 2, 3, 4, 5, 6, 7]
    };
  }

  renderAnswer = ({ item, index }) => {
    return <AnswerView item={item} index={index}/>;
  };

  render() {
    return (
      <View
        style={{
          width: width,
          height: '100%',
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View style={{
          width: "100%",
          height: 100,
          backgroundColor: "#ffffff",
          flexDirection: "row",
          justifyContent: "flex-start",
          alignItems: "center"
        }}>
        <Text style={{
          marginLeft: 16,
          fontSize: 18,
          fontWeight: "600"
        }}> {this.props.item}: All health problems I have had: ?? </Text>
        </View>
        <FlatList style={{
            width: "100%",
            height: "100%",
            backgroundColor: "#ffffff"
        }}
        data={this.state.answers}
        renderItem={this.renderAnswer}
        numColumns={2}
        keyExtractor={(id, index) => index.toString()}
        />
      </View>
    );
  }
}

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      images: [1, 2]
    };
  }

  renderItem = ({ item, index }) => {
    return <AssessmentListItem item={item} />;
  };

  onPressPrevious() {
      this.flatListRef.scrollToIndex({ animated: true, index: 0 });
  };

  onPressNext() {
      this.flatListRef.scrollToIndex({animated: true, index: 1});
  };
// TODO: HERE
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          ref={ref => {
            this.flatListRef = ref;
          }}
          style={{ flex: 1 }}
          data={this.state.images}
          horizontal
          pagingEnabled={true}
          legacyImplementation={false}
          keyExtractor={(id, index) => index.toString()}
          renderItem={this.renderItem}
          {...this.props}
        />
        <View
          style={{
            width: "100%",
            height: 110,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "stretch",
            backgroundColor: "#ffffff",
            shadowColor: "#000000",
            shadowOpacity: 0.05,
            shadowRadius: 5,
            shadowOffset: {
                height: -1,
                width: 0
            }
          }}
        >

          <TouchableOpacity
            style={{
              flex: 1,
              height: 48,
              backgroundColor: "#ffffff",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              marginLeft: 16,
              marginTop: 14,
              marginRight: 16,
              borderWidth: 1,
              borderColor: "#00E2B2",
              borderRadius: 4
            }}
            onPress={this.onPressPrevious}
          >
              <Text style={{
                  color: "#00E2B2",
                  fontSize: 16,
                  fontWeight: "700"
              }}>PREVIOUS</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 1,
              height: 48,
              backgroundColor: "#00E2B2",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              marginRight: 16,
              marginTop: 14,
              borderWidth: 1,
              borderColor: "#00E2B2",
              borderRadius: 4
            }}
            onPress={this.onPressNext}
          >
              <Text style={{
                color: "#ffffff",
                fontSize: 16,
                fontWeight: "700"
              }}>NEXT</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

堆栈跟踪：

undefined is not an object (evaluating 'this.refs.flatListRef')

onPressPrevious
    App.js:113:16

我已从此处引荐：https://snack.expo.io/rkVFW2M1H

让我知道我在想什么吗？

Answer 1

我能够通过

解决

this.onPressNext = this.onPressNext.bind(this);
this.onPressPrevious = this.onPressPrevious.bind(this);

＆删除{... this.props}

添加此两行构造函数 REF：Why ref does not work in the FlatList component?

OR

更改按钮操作方法

  onPressPrevious = () => {
      this.flatListRef.scrollToIndex({ animated: true, index: 0 });
  };

  onPressNext = () => {
      this.flatListRef.scrollToIndex({animated: true, index: 1});
  };