React native React Native-触发平面列表在平面列表外部滚动

我有一个垂直

FlatList

组件和两个按钮，如

touchablepacity

，如何使用按钮执行

FlatList

的滚动

i、 e.“向下滚动平面列表”和“向上滚动平面列表”

最简单的例子：

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

滚动至TopText
向底部文本滚动

您可以使用scrollView组件

这并不难实现，组件已经有了实现这一点的方法

• ：滚动到内容的末尾

• ：滚动到指定索引处的项目，如顶部的

  0

我为您创建了一个简单的演示：

我已经创建了一个自定义的

和

组件。我正在用这种格式的随机数据创建一个数组

const数据=[
{message:'Random message'}，{message:'Random message'}
]

我通过添加

ref={ref=>（this.flatlist=ref）}

然后我调用这些方法，就这样

this.flatlist.scrollToEnd（）}/>

整个源代码：

从“React”导入React；
从“react native”导入{Text，View，FlatList，StyleSheet}；
从“圣诞快乐”导入{random}；
从“./组件/卡”导入卡；
从“./components/Button”导入按钮；
const data=[…数组（10）].map（i=>（{message:random（）}））；
导出默认值（）=>(
（this.flatlist=ref）}
数据={data}
renderItem={（{item}）=>}
/>
this.flatlist.scrollToIndex（{index:0}）}
/>
this.flatlist.scrollToEnd（）}/>
);

由于性能原因，我需要使用平面列表组件而不是scrollview。是的，我理解，与其在视图标记下关闭它们，不如在scrollViewTag下关闭它们，性能仍然会很好，因为平面列表覆盖了大数据的组件。也许我应该澄清我的问题，通常你用手指通过滑动来触发平面列表的滚动，我想用按钮点击来代替滑动操作，按钮在平面列表之外。我现在明白了，你可以参考Andus，检查我的答案是否能帮助你