代码之家 › 专栏 › 技术社区 › Sandro_V

对FlatList的React本机引用不起作用

react-native-flatlist react-native

2

Sandro_V · 技术社区 · 8 年前

我尝试在react native应用程序中始终滚动到平面列表的底部,但不幸的是,我没有找到平面列表的参考。

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

在render函数中,我尝试调用scrollToEnd()方法

this.flatList.scrollToEnd();

我试过了

ref = {"flatlist"}

或

ref = "flatlist"

但它们都不起作用,我总是会出错: TypeError:无法读取未定义的属性“scrollToEnd”。

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

4 回复 | 直到 8 年前

1

3

Clad Clad 8 年前

你必须使用参考号 this.refs.flatlist.scrollToEnd()

还可以添加动画可选参数:

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

对于声明,我个人是这样做的:

ref='flatlist'

然后,您必须使用以下技巧使用此函数调用该方法(而不是在渲染中,因为在第一次完成渲染后将首先声明ref,因此渲染中没有ref):

React Native ListView scrollToEnd it doesn't work

2

Sachin Rajput KgaboL 8 年前

您需要从引用访问平面列表才能调用scrollToEnd()方法

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

更改您的代码 this.flatList.scrollToEnd(); 到 this.refs.flatlist.scrollToEnd();

这对你有用。

3

0

Sandro_V 8 年前

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

4

0

Dogu Deniz Ugur 6 年前

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