我需要制作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文件。
答案 0 :(得分: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 />} ... />
...