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

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

react-native-flatlist react-native

Sandro_V · 技术社区 · 6 年前

我尝试在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 回复 | 直到 6 年前

Clad Clad 6 年前

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

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

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

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

ref='flatlist'

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

React Native ListView scrollToEnd it doesn't work

Sachin Rajput KgaboL 6 年前

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

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

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

这对你有用。

Sandro_V 6 年前

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

Dogu Deniz Ugur 5 年前

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

推荐文章

theDC · 平面列表单选单元格

6 年前

Md Nahid Hasan · 如何在react原生平面列表中精确定位项目并隐藏某些内容?

6 年前

j_d · 如何使用React Native FlatList设置重新排序动画?

6 年前

johanjohansson · 如何在平面列表中交替颜色(React Native)

6 年前

arnoldbird · 我的平面列表似乎不需要密钥抽取器——为什么?

6 年前

KaplanAlex · React Native FlatList-使用动态大小呈现列表项

6 年前

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

6 年前

Saeid · 在react native中不调用平面列表中的函数

6 年前

Corrado · ReactNative平面列表-RenderItem不工作

6 年前

Adnan Ali · ReactNative android应用程序中的慢速动画

6 年前