react-native-draggable-flatlist 在 ScrollView 中不起作用

Posted 2023-02-21

【中文标题】react-native-draggable-flatlist 在 ScrollView 中不起作用

【英文标题】：react-native-draggable-flatlist not working inside ScrollView

【发布时间】：2020-09-25 16:12:16

【问题描述】：

过去几个月我一直在努力实现一个要求，即我在单个滚动视图中有一个可拖动的平面列表和一个平面列表，并且我应该能够滚动整个内容。

可拖动的平面列表也应该具有自动滚动功能，这意味着当列表太长并且我试图将其拖出视口时，除非我放下它，否则列表应该自动滚动。

我知道这个要求非常棘手，但我没有任何线索让它完全工作。

我正在使用下面的代码，并且为此目的使用了 'react-native-draggable-flatlist'(https://github.com/computerjazz/react-native-draggable-flatlist)。

代码：

import React from 'react';
import 
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity
 from 'react-native';

import 
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
 from 'react-native/Libraries/NewAppScreen';
import DraggableFlatList from 'react-native-draggable-flatlist'
import  Component  from 'react'

const exampleData = [...Array(20)].map((d, index) => (
  key: `item-$index`, // For example only -- don't use index as your key!
  label: index,
  backgroundColor: `rgb($Math.floor(Math.random() * 255), $index *
  5, $132)`
));

class App extends Component 
  state = 
    data: exampleData,
    scrollEnabled: true
  ;
  onEnableScroll = (value: boolean) => 
    this.setState(
      enableScrollViewScroll: value,
    );
  ;

  renderItem = ( item, index, drag, isActive ) => 
    return (
      <TouchableOpacity
        style=
          height: 100,
          backgroundColor: isActive ? "blue" : item.backgroundColor,
          alignItems: "center",
          justifyContent: "center"
        
        onLongPress=drag
      >
        <Text
          style=
            fontWeight: "bold",
            color: "white",
            fontSize: 32
          
        >
          item.label
        </Text>
      </TouchableOpacity>
    );
  ;

  render() 
    return (
      <ScrollView
        style= backgroundColor: '#000', flex: 1 
        contentContainerStyle= paddingTop: 800, paddingBottom: 100 
        scrollEnabled=this.state.scrollEnabled
      >
        <DraggableFlatList
          data=this.state.data
          renderItem=this.renderItem
          keyExtractor=(item, index) => `draggable-item-$item.key`
          onMoveBegin=() => this.setState( scrollEnabled: false )
          onMoveEnd=( data ) => 
            this.setState( scrollEnabled: true, data );
          
        />

        <FlatList
          data=this.state.data
          renderItem=this.renderItem
          keyExtractor=(item, index) => `draggable-item-$item.key`
        />

      </ScrollView>
    );
  


const styles = StyleSheet.create(
  scrollView: 
    backgroundColor: Colors.lighter,
  ,
  engine: 
    position: 'absolute',
    right: 0,
  ,
  body: 
    backgroundColor: Colors.white,
  ,
  sectionContainer: 
    marginTop: 32,
    paddingHorizontal: 24,
  ,
  sectionTitle: 
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  ,
  sectionDescription: 
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  ,
  highlight: 
    fontWeight: '700',
  ,
  footer: 
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  ,
);

export default App;

【问题讨论】：

您找到解决方案了吗？我面临这个问题

@QuangThái - 还没有

【参考方案1】：

您应该使用ListFooterComponent 和ListHeaderComponent 方法来渲染项目。

请像下面的代码一样更改您的渲染方法。

render() 
      return (
        <View
          style= backgroundColor: '#000', flex: 1 
        >
          <DraggableFlatList
            data=this.state.data
            renderItem=this.renderItem
            keyExtractor=(item, index) => `draggable-item-$item.key`
            onMoveBegin=() => this.setState( scrollEnabled: false )
            onMoveEnd=( data ) => 
              this.setState( scrollEnabled: true, data );
            
            ListFooterComponent=() => 
              return <View>
                <FlatList
                  data=this.state.data
                  renderItem=this.renderItem
                  keyExtractor=(item, index) => `draggable-item-$item.key`
                />
              </View>
            
          />
        </View>
      );