您的位置:首页 > Web前端 > React

react-native ListView bug解决办法

2017-07-18 15:02 239 查看
昨天实现ListView加载图片时,出现了一个坑爹的问题,数据源如果在类里声明好,加载无问题,但是用网络请求获取数据后,界面显示图片不全。

显示没问题时的数据源

const data = [{
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}, {
url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460'
}];
...
constructor(props) {
super(props);
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(data),
};
}
...


显示有问题时的数据源

...
constructor(props) {
super(props);
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds,
};
}
...
// 获取数据成功方法
getOrderPictureSuccessCallBack(result) {
if(result){
this.setState({
dataSource: this.state.dataSource.cloneWithRows(result),
});
}
}
...


查了很多资料,还是没发现问题出在哪,后来将renderRow中的Image改为Text,还是显示不全,但这时我滑动了屏幕,竟然显示完全了,然后就去搜了下问题,果然有解决方案:在listView中添加removeClippedSubviews属性。

<ListView
removeClippedSubviews={false}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
contentContainerStyle={styles.listViewStyle}
/>


问题解决,再将Text换回Image。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息