react-native - 是否可以在 2 列 Flatlist 中进行行反转？

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'}}

在渲染项目中我flexDirection:'row-reverse'也使用

但没有成功！

Answer 1

你可以flexDirection: 'row-reverse'在里面使用columnWrapperStyle：

<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