响应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/>组件已经有方法可以这样做了。

• scrollToEnd()：滚动到内容的末尾。
• scrollToIndex()：滚动到指定索引处的项，如顶部的0。

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

我已经创建了一个定制的<Button/>和<Card/>组件。我正在创建一个具有这种格式的随机数据的数组。

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

我是通过添加一个对<Flatlist/>的引用

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

然后我调用这些方法，仅此而已。

<Button title="▼" onPress={() => this.flatlist.scrollToEnd()} />

​

​

整个源代码：

import React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';
import { random } from 'merry-christmas';
import Card from './components/Card';
import Button from './components/Button';

const data = [...Array(10)].map(i => ({ message: random() }));

export default () => (
  <View style={styles.container}>
    <FlatList
      ref={ref => (this.flatlist = ref)}
      data={data}
      renderItem={({ item }) => <Card gretting={item.message} />}
    />
    <View style={styles.bottomContainer}>
      <Button
        title="▲"
        onPress={() => this.flatlist.scrollToIndex({ index: 0 })}
      />
      <Button title="▼" onPress={() => this.flatlist.scrollToEnd()} />
    </View>
  </View>
);

Answer 2

您可以使用scrollView组件