React Native - 在 FlatList 之外触发 FlatList 的滚动 [英] React Native - trigger scrolling of FlatList outside the FlatList

问题描述

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

即将 FlatList 滚动到底部"和将 FlatList 滚动到顶部"?

最小示例:

<查看><FlatList/><TouchableOpacity><Text>滚动到顶部</>Text</TouchableOpacity><TouchableOpacity><Text>向下滚动</>Text</TouchableOpacity></查看>

解决方案

这并不难完成， 组件已经有方法可以做到这一点.

• scrollToEnd():滚动到内容的末尾.

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

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

我创建了一个自定义的 和 组件.我正在用这种格式创建一个包含一些随机数据的数组

const data = [{消息:'随机消息'}，{消息:'随机消息'}]

我通过添加

来添加对的引用

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

然后我调用方法，就是这样.

this.flatlist.scrollToEnd()}/>

整个源代码:

从'react'导入React；import { Text, View, FlatList, StyleSheet } from 'react-native';从圣诞快乐"导入{随机}；从'./components/Card'导入卡片；从./components/Button"导入按钮；const data = [...Array(10)].map(i => ({ message: random() }));导出默认值 () =>(<视图样式={styles.container}><平面列表参考={参考=>(this.flatlist = ref)}数据={数据}renderItem={({ item }) =><卡片 gretting={item.message}/>}/><视图样式={styles.bottomContainer}><按钮标题="▲"onPress={() =>this.flatlist.scrollToIndex({ index: 0 })}/><按钮标题="▼" onPress={() =>this.flatlist.scrollToEnd()}/></查看></查看>);

I have a vertical FlatList component and two buttons as TouchableOpacity, how do I perform scrolling of the FlatList with the buttons,

i.e. 'scrolling the FlatList towards bottom` and 'scroll the FlatList towards top'?

Minimal Example:

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

解决方案

This is not difficult to accomplish, The <Flatlist/> component already have methods to do that.

• scrollToEnd(): Scrolls to the end of the content.

• scrollToIndex(): Scrolls to the item at the specified index such 0 which is the top.

I have created a simple demo for you: https://snack.expo.io/@abranhe/flatlist-scroll

I have created a custom <Button/> and <Card/> components. I am creating an array with some random data with this format

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

I am adding a reference to the <Flatlist/> by adding

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

Then I call the methods and that's it.

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

The whole source code:

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>
);

这篇关于React Native - 在 FlatList 之外触发 FlatList 的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！