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

【问题标题】：React Native - trigger scrolling of FlatList outside the FlatListReact Native - 在 FlatList 之外触发 FlatList 的滚动
【发布时间】：2019-08-07 15:20:42
【问题描述】：

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

即'将 FlatList 向底部滚动'和'将 FlatList 向顶部滚动'？

小例子：

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

【问题讨论】：

Andus，看看我的回答能不能帮到你

标签： react-native react-native-android react-native-ios

【解决方案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>
);

【讨论】：

【解决方案2】：

你可以使用 scrollView 组件

【讨论】：

由于性能原因，我需要使用平面列表组件而不是滚动视图。
是的，我明白了，与其在视图标签下关闭它们，不如在滚动视图标签下关闭它们，性能还是不错的，因为平面列表覆盖了大数据
也许我应该澄清我的问题，通常你用手指通过滑动来触发平面列表的滚动，我想通过按钮点击来替换滑动动作，这些按钮在平面列表之外跨度>
呵呵我懂了，可以参考this