是否有可能在2列平面表中进行行反转？

Question

我在react-native-android中创建了一个2列的FLatlist

1    |    2
------------
3    |    4

我想要这个

2    |    1
4    |    3

我试一下这些：

<View style={{flex:1,flexDirection:'row-reverse'}}>
        <FlatList
            style={{flex:1,flexDirection:'row-reverse'}}

在render item中我也使用了flexDirection:'row-reverse'

但是没有成功！

Answer 1

您可以在columnWrapperStyle中使用flexDirection: 'row-reverse'：

<FlatList
  numColumns={2}
  columnWrapperStyle={{ flexDirection: 'row-reverse' }}
  data={data}
  renderItem={yourRenderFunction}
/>

Answer 2

我建议只修改数据的顺序：

例如，您可以引入一个执行重新排序的arrayMove函数。

示例：

​

  const data = [
        { 
          'id': 1 
        },
        { 
          'id': 2
        },
        { 
          'id': 3
        },
        { 
          'id': 4
        } 
   ];
  
  
function arrayMove(arr, fromIndex, toIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(toIndex, 0, element);
}
console.log('data', data);
arrayMove(data, 1, 0);
arrayMove(data, 3, 2);
console.log('data permutated', data); 

​

​

​

工作博览会：

https://snack.expo.io/ryeNv5S2E