react-native - 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

我之前遇到过同样的要求，这是我使用的代码的关键(使用react-native-invertible-scroll-view包):

// `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 />} ... />
...