Question

我目前不知所措，并坚持使用此功能，我见过类似react-native（sortable-grid，draggable等）的库。它们工作正常，但已定义为行和项。例如：

xxxx
yyyy
zzzz

我想使用自定义模式布局实现交换，如下所示： https://imgur.com/a/uWgFZdM“布局”

我想自由交换那些组件，因为您可以看到一行中的项目数有所不同。

我已经尝试使用多个库来实现这一点，但是同样，我只能为整个结构设置每行定义数量的项目。

我有以下代码，带有react-native-draggable：

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import SortableGrid from 'react-native-sortable-grid';
import Draggable from 'react-native-draggable';

export default class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            items: 1
        }
    }

  render() {
    return (
      <View>
          <Draggable renderSize={30} renderColor='black' offsetX={0} offsetY={-200} renderText='A' pressDrag={()=>alert('touched!!')}/>
          <Draggable renderSize={30} renderColor='black' offsetX={-100} offsetY={-100} renderText='B' pressDrag={()=>alert('touched!!')}/>
          <Draggable renderSize={30} renderColor='black' offsetX={100} offsetY={-100} renderText='C' pressDrag={()=>alert('touched!!')}/>
          <Draggable renderSize={30} renderColor='black' offsetX={100} offsetY={0} renderText='E' pressDrag={()=>alert('touched!!')}/>
          <Draggable renderSize={30} renderColor='black' offsetX={-100} offsetY={0} renderText='D' pressDrag={()=>alert('touched!!')}/>
          <Draggable renderSize={30} renderColor='black' offsetX={0} offsetY={100} renderText='F' pressDrag={()=>alert('touched!!')}/>
      </View>
    );
  }
}

你们中有些人知道如何实现此交换功能吗？任何想法，将不胜感激。为了以防万一，我还尝试使用状态来修改每行的项目，但是我收到了来自React的不变违规，从而防止了无限循环。

如何在React Native中交换/排序项目？

0 个答案: