更新 react-native-sortable-listview 中所有地方的位置

本文介绍了更新 react-native-sortable-listview 中所有地方的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 react-native 中使用 react-native-sortable-listview 对相同的地方进行排序.

I am using react-native-sortable-listview in react-native for sorting same places.

 constructor() {
   this.state = {
     makers: [
       { kolkata: 'Hawrah Birdge' },
      { Delhi: 'Lal Kila' },
      { Agra: 'Taj Mahal' },
      { Mumbai: 'India Gate' },
     ],
     allObj: {},
     order: []
   };
 }
 componentDidMount() {
   const newAllObj = this.getAllObjFromMaker(this.state.makers);
   const newOrder = this.getOrderFromMaker(newAllObj);
   this.setState({ allObj: newAllObj, order: newOrder });
 }
 getAllObjFromMaker(makers) {
    const allObj = makers.reduce((result, d) => {
    result[`${d.coordinate.latitude}_${d.coordinate.longitude}`] = d;
    return result;
   }, {});
  return allObj;
 }
getOrderFromMaker(allObj) {
  const order = Object.keys(allObj);
  return order;
}
 renderOneDraggableMilestone(milestone) {
  const i = this.state.makers.indexOf(milestone);
  return (
     <TouchableOpacity {...this.props.sortHandlers}>
        <Text>{i + 1}</Text>        
        <Text>{milestone.address}</Text>
     </TouchableOpacity>
    );
  }
  arrangedMilestoneList(e) {
    const arr = this.state.makers;
    arr.splice(e.to, 0, arr.splice(e.from, 1)[0]);
    const newAllObj = this.getAllObjFromMaker(arr);
    const newOrder = this.getOrderFromMaker(newAllObj);
    this.setState({ makers: arr, allObj: newAllObj, order: newOrder 
     });
   }
 render() {
   return (
     <SortableListView
      data={this.state.allObj}
      order={this.state.order}
      activeOpacity={0.5}
      onRowMoved={e => {
        this.arrangedMilestoneList(e);
        this.forceUpdate();
      }}
      renderRow={(row) => this.renderOneDraggableMilestone(row)}
    />
   );    
 }

我想在 this.state.makers 中安排地点及其位置，就像我在 renderOneDraggableMilestone 中使用 i 所做的那样.在 renderRow 上，只渲染可拖动的地方，因此只更新它们的位置.而 renderRow 最后执行，所以 forceUpdate 也不起作用.

I want to arrange places and also their position in this.state.makers as I am doing using i in renderOneDraggableMilestone. On renderRow only draggable place are render so only their position is updated. And renderRow is last to excute so forceUpdate is also not working.

执行renderRow后如何重新渲染.所以所有位置都可以更新.

How to rerender after executing renderRow. So all position could be updated.

推荐答案

好的，我找到了一种重新渲染的方法，如下所示.

Ok I have find a way to re-render as follow.

   <SortableListView
  key={this.state.count}
  data={this.state.allObj}
  order={this.state.order}
  activeOpacity={0.5}
  onRowMoved={e => {
    this.setState({ count: this.state.count + 1 });
    this.props.arrangedMilestoneList(e);
    console.log('onRowMoved is called');
  }}
  onMoveEnd={() => console.log('onMoveEnd is fired')}
  renderRow={(row, s1, i) => this.renderOneDraggableMilestone(row, s1, i)}
/>

我正在做的是向 SortableListView 添加一个键属性，并在每个 onRowMoved 操作上更新此键.正因为如此，它会导致重新渲染.

What I am doing is I added a key attribute to SortableListView and update this key on each onRowMoved action. And because of this it causes re-render.

这篇关于更新 react-native-sortable-listview 中所有地方的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Native