如何在React Native中顛倒ListView的堆棧順序？

Question

我需要構建圖像的ListView。我希望前者應在後者這樣上面：

這裏是我的代碼：

class PostsList extends Component { 
    constructor(props, context) { 
    super(props, context); 
    var dataSource = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => ri !== r2 
    }); 
    this.state = { 
     dataSource: dataSource.cloneWithRows([ 
     'img_1.jpg', 
     'img_2.jpg', 
     'img_3.jpg', 
     'img_4.jpg', 
     'img_5.jpg', 
     ]) 
    } 
    } 
    renderRow(rowData, sectionID, rowID) { 
    console.log(typeof rowID); 
    var width = Dimensions.get('window').width; 
    var height = width * 3/4; 
    var marginTop = (rowID === '0') ? 0 : -height/2; 
    var source; 
    if(rowID === '0') { 
     source = require('../assets/img/img_1.jpg'); 
    } else if(rowID === '1') { 
     source = require('../assets/img/img_2.jpg'); 
    } else if(rowID === '2') { 
     source = require('../assets/img/img_3.jpg'); 
    } else if(rowID === '3') { 
     source = require('../assets/img/img_4.jpg'); 
    } else if(rowID === '4') { 
     source = require('../assets/img/img_5.jpg'); 
    } 
    return (
     <Image 
     style={[styles.image, {width, height, marginTop}]} 
     source={source} 
     resizeMode={Image.resizeMode.contain} 
     /> 
    ); 
    } 
    render() { 
    return(
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow.bind(this)} 
     /> 
    ); 
    } 
}; 

，結果是這樣的：

我知道爲什麼這個結果，但我不知道如何反轉堆棧順序。

這裏使用的數據是假的，真實的數據將是來自另一個站點的Ajax獲取的JSON文件。

Answer 1

// `https://github.com/exponent/react-native-invertible-scroll-view` 
... 
import InvertibleScrollView from 'react-native-invertible-scroll-view'; 
... 
this.state = { dataSource: dataSource.cloneWithRows([...].reverse()), ... } 
... 
<ListView renderScrollComponent={props => <InvertibleScrollView {...props} inverted />} ... /> 
...