Как создать список Dragabble в React Native? - PullRequest
Новая
       77

Как создать список Dragabble в React Native?

0 голосов
/ 26 мая 2020
• 1000 list, но он не перетаскивается ie Я не смог изменить положение каждого элемента в списке. Тот же код, который я скопировал. Мой код:

список. js

   import React, { Component } from "react";
   import { View, TouchableOpacity, Text } 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>
);
};

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

  export default Example;

, а пользовательский интерфейс выглядит так:

Весь список прокручивается, но каждый элемент не перетаскивается. Как сделать этот список перетаскиваемым? Любая помощь?

введите описание изображения здесь

...