对 FlatList 的 React-Native 引用不起作用

Question

我尝试在我的 React 本机应用程序中始终滚动到平面列表的底部，但不幸的是我没有得到对平面列表的引用。

            <View style={styles.viewPointOverview}>
                <Text > Point overview: </Text>
                <FlatList
                    ref={(ref) => this.flatList = ref}
                    data={pointRecord}
                    renderItem={({ item }) => <Text>{item}</Text>}
                />
            </View>

并且在渲染函数中我尝试调用方法 scrollToEnd()

this.flatList.scrollToEnd();

我在

的平面列表中尝试过

ref = {"flatlist"}

或

ref = "flatlist"

但其中 none 有效我总是收到错误消息：类型错误：无法读取未定义的属性 'scrollToEnd'。

您可以在这里找到完整的代码：https://github.com/AlessandroVol23/Counter10000/blob/master/app/screens/PlayScreen.js

Answer 1

你必须使用 ref 所以它将是 this.refs.flatlist.scrollToEnd()

您还可以添加动画可选参数：

  this.refs.flatlist.scrollToEnd({animated: true });

对于声明，我个人是这样做的：

ref='flatlist'

然后你必须用这个函数调用方法（不是在没有 ref 的渲染中，因为它将在第一次完整渲染之后首先声明）使用这个技巧：

React Native ListView scrollToEnd it doesn't work

Answer 2

您需要从引用访问 FlatList 以调用方法 scrollToEnd()

this.refs.flatlist.scrollToEnd({animated: true });

将代码 this.flatList.scrollToEnd(); 更改为 this.refs.flatlist.scrollToEnd();

它会为你工作。

Answer 3

就像 Clad Clad 告诉我的那样，我在 render 方法中有它，当然 flatlist 元素此时不存在。谢谢！ :-)

Answer 4

你应该给平面列表 ref={(ref) => { this.listRef = ref; }} 道具。

对 FlatList 的 React-Native 引用不起作用

React-Native Reference to FlatList doesn't work

react-native

react-native-flatlist