React Native 如何在FlatList上启用或禁用滚动

ecbunoof  于 2023-10-22  发布在  React
关注(0)|答案(4)|浏览(220)

我有一个FlatList,它被 Package 在一个视图中。

<View {...this._panResponder.panHandlers}>
<FlatList .../>
</View>

View是一个panResponder,那么如何在onPanResponderGrant触发时禁用FlatList的滚动。

f5emj3cl

f5emj3cl1#

documentation声明FlatList具有ScrollView的属性:
因此继承了它的props(以及ScrollView的props)
如果查看ScrollView的文档,您将看到您所需要做的就是将scrollEnabled属性设置为false以禁用滚动。如何以及在哪里你选择这样做将取决于你,因为你没有真正张贴任何代码。处理这个问题的一个简单方法是使用state:

<FlatList
  ...
  scrollEnabled={this.state.scrollEnabled}
/>

// Change the state to the appropriate value in onPanResponderGrant:
// To enable:
this.setState({ scrollEnabled: true })
// To disable:
this.setState({ scrollEnabled: false })
tv6aics1

tv6aics12#

您可以将ref保存到FlatList并在此ref上调用setNativeProps:

this.flatList.setNativeProps({ scrollEnabled: false })
jdgnovmf

jdgnovmf3#

<FlatList
      data={data}
      scrollEnabled={false} <---- use this 
      showsVerticalScrollIndicator={false}
      keyExtractor={item => item.id}
      renderItem={renderItem}
    />
bt1cpqcv

bt1cpqcv4#

使用ScrollView而不是View。

相关问题