还是有bug. about react-native-drag-sort HOT 25 CLOSED

你可以下demo的使用方式，onDataChange里面可以去改变dataSource，onDataChange调用的情况是手动拖拽时才会调用的，如果你dataSource改变我调用onDataChange，那我demo里onDataChange里有改变dataSource，不是死循环里

from react-native-drag-sort.

假如dataSource数据源改变的情况下, 是没办法刷新的, 是吗?

from react-native-drag-sort.

问题还是没有得到解决, 现在的需求是点击Item右上角的X号,才删除数据,与你demo中的需求相左.我并不能作为参照.

from react-native-drag-sort.

没理解你的逻辑，数据如果是你自己改变的componentWIllReceiveProps或者setState里自己就可以判断里，如果是拖拽后会调用onDataChange的，不可能说你改变dataSource时我在onDataChange里通知你，可以实现，但和我设计理念向左，onDataChange是手指拖动后提示你

from react-native-drag-sort.

不好意思, 可能我表述的不太清楚. github不知道怎么贴图. 我的需求是点击右上角的关闭符号,能在dataSource数据源更改的情况下, 列表能够重新刷新.onDataChange的拖拽结束的调用,目前还没涉及.

from react-native-drag-sort.

1. github贴图，直接把图片拖入评论框里就可以。
2. 你的数据得在this.state = {data: [你的数据]}，当你改变数据时this.setState(data: [改变后的数据])。在组件里dataSource={this.state.data}当数据data改变时，它会自动重绘的。
   下面是我组件里的方法
   componentWillReceiveProps(nextProps) {
   if (this.props.dataSource != nextProps.dataSource) {
   this.reComplexDataSource(false,nextProps)
   }
   }
   你改变里数据就会重绘。

from react-native-drag-sort.

就像这种, 我改变了dataSource里的数据,但缺没有重新刷新. 这是我疑惑的地方.打断点看过.确认是改过了.

from react-native-drag-sort.

肯定会刷新的，你的数据放在state上，this.state = { dataSource : [] },改变后this.setState({dataSource: [新数据]})

from react-native-drag-sort.

感谢. 我会重新起个干净项目试试. 一会儿给回复.

from react-native-drag-sort.

流程你要清楚，我的demo里有这个功能，你可以看下demo。流程是：插件只负责给你提醒和回馈onDataChange里提醒你数据被移动了，数据会回给你你调用this.setState改变数据，改变后，组件监控dataSource改变后会调用componentWillReceiveProps里面会重新赋值新数据。你可以看看代码

from react-native-drag-sort.

把DragSortableView.js 单独拉到我工程下.发觉

componentWillReceiveProps(nextProps) {
        if (this.props.dataSource != nextProps.dataSource) {
            this.reComplexDataSource(false,nextProps)
        }
    }

this.props.dataSource和nextProps.dataSource,除了第一次可以正常刷新外. 不管怎样更改数据, 这两个值都相等. 这或许就是不能刷新的原因.
比如, 第一次, 数组个数是5, 能正常刷新. 然后删掉一个,数组个数为4, 这两个值的个数都为4. 所以才不会刷新.

from react-native-drag-sort.

this.props.dataSource 改为 this.state.dataSource,正常刷新. 但是拖拽效果却出现了问题.

from react-native-drag-sort.

如果你的dataSource改变了，则 nextProps.dataSource !== this.props.dataSource,你的逻辑在demo里有，你可以看看我的demo

from react-native-drag-sort.

谢谢.我找到问题所在了. 需要重新new一个数组,进行操作. 应该涉及到深拷贝和浅拷贝的问题.所以我设置它的data. 它一直没有刷新. 希望后来的朋友不要范我的错误.可以把这个作为常见问题,写在md文件中.js初学者的肯定会犯同样的错误.

from react-native-drag-sort.

再次感谢作者分享的组件.很不错.

from react-native-drag-sort.

谢谢.我找到问题所在了. 需要重新new一个数组,进行操作. 应该涉及到深拷贝和浅拷贝的问题.所以我设置它的data. 它一直没有刷新. 希望后来的朋友不要范我的错误.可以把这个作为常见问题,写在md文件中.js初学者的肯定会犯同样的错误.

拖拽不更新，在什么地方处理呢？

from react-native-drag-sort.

谢谢.我找到问题所在了. 需要重新new一个数组,进行操作. 应该涉及到深拷贝和浅拷贝的问题.所以我设置它的data. 它一直没有刷新. 希望后来的朋友不要范我的错误.可以把这个作为常见问题,写在md文件中.js初学者的肯定会犯同样的错误.

拖拽不更新，在什么地方处理呢？

项目里面有六种Demo演示，你可以看下。数据刷行在onDataChange里。

from react-native-drag-sort.

谢谢.我找到问题所在了. 需要重新new一个数组,进行操作. 应该涉及到深拷贝和浅拷贝的问题.所以我设置它的data. 它一直没有刷新. 希望后来的朋友不要范我的错误.可以把这个作为常见问题,写在md文件中.js初学者的肯定会犯同样的错误.

拖拽不更新，在什么地方处理呢？

项目里面有六种Demo演示，你可以看下。数据刷行在onDataChange里。

是在onDataChange里面处理的。关键是sourceData取得是props的。props数据更新了，但是没有渲染。我的情况和 @xclidongbo 的描述一直。要么不渲染，要么拖拽不更新，onDataChange触发了，只是还是拖动前的数据

from react-native-drag-sort.

他说的需要重新new Array，我没明白在哪一步new

from react-native-drag-sort.

他说的需要重新new Array，我没明白在哪一步new

你的数据改变要重新复制一个新的。
修改的时候最好 const newData = [...this.state.data];newData.aaa = "改变后的数据"

from react-native-drag-sort.

这是我的代码

from react-native-drag-sort.

上面是我的代码，还是不行

from react-native-drag-sort.

我和你说下Demo里的逻辑吧: 主要是你有一个数组 ( dataSource={你的数据x} ) 要进行排序。每次拖拽排序后数据会通过onDataChange回给你。你可以看下我Demo里的处理。Demo里有6、7种例子都是正确的你可以看下。还有一个问题好像没看到你的keyExtractor属性。这个和FlatList一样的作用优化用的，你要加上。
所以的demo都在里面，你可以下载运行看下，没有什么复杂的逻辑: https://github.com/mochixuan/react-native-drag-sort/tree/master/Example

from react-native-drag-sort.

我的部分代码.

  _onPressItemType = (item, itemtype) => {
    let { apps } = this.state;
    let newApps = [...apps];
    DataCenter.loadRecentApp().then(res => {
      let recentSet = new Set(res);
      if (itemtype == "add") {
        newApps.push(item);
        // 删除本地存储的setitem
        recentSet.delete(item.applicationCode);
      } else {
        for (var i = newApps.length - 1; i >= 0; i--) {
          if (newApps[i].applicationCode == item.applicationCode) {
            newApps.splice(i, 1);
            break;
          }
        }
        // 添加本地存储的setItem
        recentSet.add(item.applicationCode);
      }
      let handleArr = Array.from(recentSet);
      DataCenter.saveRecentApp(handleArr);
      let unuseApps = this._achieveUnusedApps(globalAllApps, newApps);
      let recentApps = this._achieveRecentApps(globalAllApps, handleArr);
      let data = this._handleRecentApps(unuseApps, recentApps);
      this.setState({
        apps: newApps,
        data: data
      });

      console.log("====================================");
      console.log(item);
      console.log(itemtype);
      console.log(this.state.apps);
      console.log(this.state.data);
      console.log("====================================");
    });
  };
_renderInUseApps = () => {
    let { apps, isEdit } = this.state;
    if (isEdit == true) {
      return (
        <View
          style={{ marginLeft: itemGap / 2, marginTop: 15, marginBottom: 10 }}
        >
          <DragSortableView
            dataSource={apps}
            marginChildrenTop={0}
            parentWidth={parentWidth}
            childrenWidth={childrenWidth}
            childrenHeight={childrenHeight}
            sortable={true}
            onDragStart={(startIndex, endIndex) => {
              this.setState({
                scrollEnabled: false
              });
            }}
            onDragEnd={startIndex => {
              this.setState({
                scrollEnabled: true
              });
            }}
            onDataChange={apps => {
              // delete or add data to refresh
              this.setState({
                apps: apps
              });
            }}
            onClickItem={(data, item) => {
              console.log(11111);
            }}
            keyExtractor={this._keyExtractor}
            renderItem={item => this._renderSubItem({ item }, "delete")}
          ></DragSortableView>
        </View>
      );
    } else {
      return null;
    }
  };

from react-native-drag-sort.

可以按照提供的Example来写.

from react-native-drag-sort.