React Native - 在 FlatList 之外触发 FlatList 的滚动

Question

我有一个垂直FlatList组件和两个按钮TouchableOpacity，如何使用FlatList按钮执行滚动，

即“将 FlatList 滚动到底部”和“将 FlatList 滚动到顶部”？

最小示例：

<View>
    <FlatList/>
    <TouchableOpacity>
        <Text>Scroll towards Top</>Text
    </TouchableOpacity>
    <TouchableOpacity>
        <Text>Scroll towards Bottom</>Text
    </TouchableOpacity>
</View>

Answer 1

这并不难实现，<Flatlist/>组件已经有方法可以做到这一点。

\n\n

\n

• scrollToEnd()：滚动到内容末尾。

\n

• scrollToIndex()：滚动到指定索引处的项目，例如0顶部。

\n

\n\n

我为您创建了一个简单的演示：https ://snack.expo.io/@abranhe/flatlist-scroll

\n\n

我创建了一个自定义<Button/>和<Card/>组件。我正在使用这种格式的一些随机数据创建一个数组

\n\n

const data = [\n { message: \'Random Message\' },  { message: \'Random Message\' }\n]\n

\n\n

<Flatlist/>我通过添加来添加对的引用

\n\n

ref={ref => (this.flatlist = ref)}\n

\n\n

然后我调用这些方法就这样了。

\n\n

<Button title="\xe2\x96\xbc" onPress={() => this.flatlist.scrollToEnd()} />\n

\n\n

\n\n

整个源码：

\n\n

import React from \'react\';\nimport { Text, View, FlatList, StyleSheet } from \'react-native\';\nimport { random } from \'merry-christmas\';\nimport Card from \'./components/Card\';\nimport Button from \'./components/Button\';\n\nconst data = [...Array(10)].map(i => ({ message: random() }));\n\nexport default () => (\n  <View style={styles.container}>\n    <FlatList\n      ref={ref => (this.flatlist = ref)}\n      data={data}\n      renderItem={({ item }) => <Card gretting={item.message} />}\n    />\n    <View style={styles.bottomContainer}>\n      <Button\n        title="\xe2\x96\xb2"\n        onPress={() => this.flatlist.scrollToIndex({ index: 0 })}\n      />\n      <Button title="\xe2\x96\xbc" onPress={() => this.flatlist.scrollToEnd()} />\n    </View>\n  </View>\n);\n

\n