9

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

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

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

我正在使用以下代码，并且为此目的使用了“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;
4

1 回答 1

1

您应该使用ListFooterComponentandListHeaderComponent方法来呈现项目。

请更改您的渲染方法，如下面的代码。

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>
      );
}
于 2021-01-29T05:36:54.677 回答