react-native ListView bug解决办法

最新推荐文章于 2024-07-15 17:16:15 发布

sybil052

最新推荐文章于 2024-07-15 17:16:15 发布

阅读量757

点赞数

分类专栏： react-native 文章标签： listview 图片 react-native

本文链接：https://blog.csdn.net/sybil052/article/details/75305090

版权

react-native 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

昨天实现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。