1

我正在使用这个库react-native-draggable-flatlist。我在这个不工作的可拖动平面列表中有 ScrollView。当我切换到 draggableFlatList 到 FlatList 并删除 TouchableOpacity 时，它可以工作。但我想使用这个可拖动的平面列表！

它不会水平滚动。但是，如果我换成 FlatList，它可以工作（非常慢）。

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';

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 Example extends Component {
  state = {
    data: exampleData,
  };

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

  renderHorizontalItem = () => {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          horizontal
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({ data }) => this.setState({ data })}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderHorizontalItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onDragEnd={({ data }) => this.setState({ data })}
        />
      </View>
    );
  }
}

export default Example;
4

0 回答 0